v-on：在 v-for 内单击不起作用答案

【问题标题】：v-on:click inside the v-for is not workingv-on：在 v-for 内单击不起作用
【发布时间】：2019-09-05 11:20:03
【问题描述】：

我正在创建一个程序，在该程序中我必须创建多个按钮，每个按钮在点击时应该执行不同的功能。

我使用 v-for 创建多个按钮，但单击按钮时不会调用 @click 函数。有人可以帮我解决这个问题吗？

<div id="app">
  <v-app id="inspire">
      <div v-for="test in this.tests">
        <v-btn color="primary" @click="{{test.method}}">{{test.name}}<v-btm>
      </div>
      {{ c }}
    </v-row>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      dialog: false,
      a : 10,
      b : 5,
      c : 0,
      tests: [
        { name: "add", method:this.add()},
        { name: "subtract", method:this.subtract()}
      ]
    }
  },
  methods:{
    add(){
      this.c = this.a+this.b
    },
    subtract(){
      this.c = this.a-this.b
    }
  }
})

点击事件触发时如何调用方法

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

这个：

@click="{{test.method}}"

必须是这样的：

@click="test.method"

你不需要大括号。 {{ ... }} 用于将文本输出到生成的 HTML 中。在v-bind 或v-on 中，您只需直接编写表达式，无需{{ ... }}。

然后这个：

tests: [
  { name: "add", method:this.add()},
  { name: "subtract", method:this.subtract()}
]

必须是这样的：

tests: [
  { name: "add", method: this.add },
  { name: "subtract", method: this.subtract }
]

或者：

tests: [
  { name: "add", method: () => this.add() },
  { name: "subtract", method: () => this.subtract() }
]

现有版本的问题是它会立即在data 函数中调用add 和subtract。 method 的值将设置为这些函数的返回值，在本例中为 undefined。

在我的第一个建议中，我刚刚删除了()，因此不会立即调用它们。相反，对函数的引用将分配给method。 Vue 会自动绑定this，所以不会有this 被丢弃的风险。

在第二个变体中，我将它们包装在箭头函数中。这再次避免了立即调用它们的问题。在这种情况下，没有真正需要包装它们，但通常它可以更灵活。必须注意确保正确的 this 值，如果我使用普通函数而不是箭头函数，这将不起作用。

【讨论】：