Vuetify - 如何有条件地更改 v-btn 的点击处理程序和文本？答案

【问题标题】：Vuetify - How to change v-btn's click handler and the text conditionally?Vuetify - 如何有条件地更改 v-btn 的点击处理程序和文本？
【发布时间】：2021-02-03 02:35:04
【问题描述】：

我有这个按钮：

<v-btn @click="handleClick">Save</v-btn>

同一个组件用于编辑和创建目的，所以我确实有另一个布尔变量来跟踪组件是否处于编辑/创建模式。现在的问题是如何将 v-btn 的点击处理程序更改为具有不同的处理程序，并且文本有条件地更改？

目前我知道我可以做到这一点：

handleClick() {
    if (editMode) {
        updateData();
    } else {
        createNew();
    }
}
// And this does not solve the problem of having the button's text fixed to "Save"

或者我可以创建两个按钮并有条件地显示它们：

<v-btn v-if="editMode==='true'" @click="updateData">Update</v-btn>
<v-btn v-if="editMode==='false'" @click="createNewData">Save</v-btn>

有没有什么方法可以用一行 v-btn 做到这一点？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

添加一个内联处理程序并根据editMode 值有条件地运行该方法，并用于呈现文本：

<v-btn  @click="()=>editMode?updateData():createNewData()">{{editMode?'Update':'Save'}}</v-btn>

【讨论】：

【解决方案2】：

您可以存储此按钮的处理程序和相应的标签。

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

var app = new Vue({
  el: '#app',
  data: {
    handler: null,
    strHandler: ""
  },
  created() {
    this.handler = this.handlerA;
    this.strHandler = "a";
  },
  methods: {
    handlerA() {
      console.log("A !")
    },
    handlerB() {
      console.log("B !")
    },
    changeHandler() {
      if (this.strHandler === "a") {
        this.handler = this.handlerB;
        this.strHandler = "b";
      }
      else {
        this.handler = this.handlerA;
        this.strHandler = "a";
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="handler">{{ strHandler }}</button>
  <button @click="changeHandler">Change</button>
</div>

【讨论】：