CODEWITHSUNDEEP
vuetify.js
pandasruler
pandasruler

Reputation: 47

how do I make a button change its color and name when it is clicked and back to the original when it is clicked again in vuetify

            <v-btn
              @click="sendState"
              :color="accountFeaturesState(accountFeatures.equityTrading)"
            >
              {{ accountFeatures.equityTrading }}
            </v-btn>

export default {
  data: function () {
    return {
      state: [{ enabled: "Enabled", disabled: "Disabled" }],
      accountFeatures: {
        equityTrading: this.state,
      },
    };
  },
  methods: {
    accountFeaturesState(color) {
      return color === this.state[this.enabled]
        ? "green"
        : color === this.state[this.disabled]
        ? "red"
        : "grey";
    },
    sendState() {
      this.state = "Disabled"
      // if (state === this.state.enabled) {
      //   state === this.state.disabled;
      // } else state === this.state.enabled;
    },

  },
};

</script>

I tried a couple different ways to go about this and then tried starting with it changing just once which is what is above now uncommented but even this does not work properly. The top part is the html code and the bottom is the script. I want the button to be green when enabled and red when disabled and change between the two every time it is clicked. I am not using the Disabled prop just putting the word disabled and making it red. Any help would be greatly appreciated.

Upvotes: 0

Views: 1806

Answers (1)

hamid niakan
hamid niakan

Reputation: 2871

you can control this behavior with a boolean value. just toggle the value on button click and return the proper value for color or title based on that.

you can also use computed property for returning these values.

run the code below and check the result:

Vue.config.productionTip = false;
Vue.config.devtools = false

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      isDisabled: false,
    };
  },
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-btn :color="isDisabled ? 'red' : 'green'" @click="isDisabled = !isDisabled">{{ isDisabled ? 'disabled' : 'activated' }}</v-btn>
  </v-app>
</div>

Upvotes: 1

Related Questions