如何让按钮在单击时更改其颜色和名称，并在 vuetify 中再次单击时返回原始按钮

Question

            <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>

我尝试了几种不同的方法来解决这个问题，然后尝试从仅更改一次开始，这是上面现在未注释的内容，但即使这样也不能正常工作。顶部是 html 代码，底部是脚本。我希望按钮在启用时为绿色，在禁用时为红色，并在每次单击时在两者之间切换。我没有使用 Disabled 道具，只是将单词 disabled 设为红色。任何帮助将不胜感激。

Answer 1

您可以使用布尔值控制此行为。只需在单击按钮时切换值，然后 return 基于该值的颜色或标题的正确值。

您还可以使用计算属性来 returning 这些值。

运行下面的代码并检查结果：

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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>

如何让按钮在单击时更改其颜色和名称，并在 vuetify 中再次单击时返回原始按钮

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

vuetify.js