Question

目前，我有一个弹出的模式，上面带有一个按钮。根据一些数据，我将更改模式上按钮的文本和功能。我正在使用一个计算式更改按钮文本，另一个使用计算式更改按钮@click代码。如果条件为true，则会将按钮的@click代码设置为其他javascript方法。

我发现打开模态后，实际上应该被调用并运行应该附加到按钮@click上的那个函数。显然，这不是我想要的。

Vue组件HTML代码：

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

Vue组件JS代码：

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;
  },

此外，vm.close似乎已正确连接，因为只有在单击按钮时才能运行。

Answer 1

请不要这样做！ Vue希望您将代码的状态与标记分开。如果执行此操作，则标记中将存在一些状态。 @click应该仅指向方法，并且所有条件逻辑都应在该方法中。只需在方法块中的处理程序中使用if()即可区分这两种情况。将会容易得多。

关于计算的事情是，您不知道/不在乎它何时运行。我想您可以使用bind（）链接参数从计算值返回一个函数，但是我感到恐惧。我不明白为什么它必须如此复杂。

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

1 个答案: