Javascript Vue.js-如何正确地有条件地设置单击处理程序代码

目前，我有一个模式，弹出一个按钮。根据下面的一些数据，我正在更改模式上按钮的文本和功能。我正在使用一个computed来更改按钮文本，另一个computed来更改按钮

@单击

code。如果条件为true，则将按钮的

@单击

代码设置为另一个javascript方法

我发现，一旦打开模式，应该连接到按钮的

@click

的函数实际上被调用并运行。显然，这不是我想要的

Vue组件HTML代码：

<button
  variant="primary"
  outline
  type="button"
  @click="continueButtonClick"
>
  {{ continueButtonText }}
</button>

---

另外，

vm.close

似乎已经正确连接，因为它只在单击按钮时运行。

请不要这样做Vue希望您将状态、代码和标记分开。如果有条件地更改事件侦听器，则标记中会有一点状态@单击应该只指向一个方法，所有条件逻辑都应该在该方法中。只需在方法块的处理程序中使用

if（）

，即可区分这两种情况。这将更容易遵循

---

computed的问题是，您不知道/不应该关心它何时运行。我想您可以使用bind（）链接参数，从计算机返回函数，但我害怕地退缩了。我不明白为什么会这么复杂。

请不要这样做Vue希望您将状态、代码和标记分开。如果有条件地更改事件侦听器，则标记中会有一点状态@单击应该只指向一个方法，所有条件逻辑都应该在该方法中。只需在方法块的处理程序中使用

if（）

，即可区分这两种情况。这将更容易遵循

---

computed的问题是，您不知道/不应该关心它何时运行。我想您可以使用bind（）链接参数，从计算机返回函数，但我害怕地退缩了。我不明白为什么它会这么复杂。

Vue在这个bindinds上做得很好，所以请忘记角度技巧

vm=this

。你不需要它。Vue对这个bindinds做得很好，所以请忘记角度技巧

vm=this

。你不需要。哈，谢谢你的更正！有助于让其他人更好地了解这些东西看看！哈，谢谢你的更正！有助于让其他人更好地了解这些东西看看！

computed: {
  continueButtonClick() {
    let vm = this;
    let click = vm.close;
    console.log("itemMapText: ", vm.item.itemMapText);
    if(vm.item.itemMapText === "map_displayText_viewPriceInCart") {
      click = vm.updateCartVue(vm.item.itemId);
    }
    return click;
  },
  continueButtonText() {
    let vm = this;
    let buttonText = "Continue Shopping";
    if(vm.item.itemMapText === "map_displayText_viewPriceInCart") {
      buttonText = "Remove From Cart";
    }
    return buttonText;
  },