如何在vue.js中动态设置@click？

Question

我有对象数组，其中action是来自vue对象的方法。

如何在v-for循环中动态设置@click？

我试图使用this.m1，“this.m1”，“m1”，但我收到一个错误：

fns.apply不是一个函数。

使用Javascript：

new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Learn JavaScript", action: this.m1 },
      { title: "Learn Vue", action: "m2" },
      { title: "Play around in JSFiddle", action: "this.m3"},
      { title: "Build something awesome", action: "m4"}
    ]
  },
  methods: {
    m1() {
        console.log('1');
    },
    m2() {
        console.log('2');
    },
    m3() {
        console.log('3');
    },
    m4() {
        console.log('4');
    },
  }
})

HTML：

<div id="app">
   <div v-for="item in items">
       <a @click="item.action" href="#">
         {{ item.title }}
       </a>
   </div>
</div>

但是ーzxsw poi

Answer 1

如果将方法名称存储在action属性中，例如https://jsfiddle.net/mezhevikin/eywraw8t/338303/，则可以通过action: "m1"将这些名称传递给方法（假设invokeMethod）。现在，在这个"invokeMethod(item.action)"中，你可以通过调用invokeMethod来调用相关函数 - 其中this[methodName]()相当于说this[methodName]。

this["m1"]

var app=new Vue({
  el: "#app",
  data: {
    items: [
      { title: "Learn JavaScript", action: "m1" },
      { title: "Learn Vue", action: "m2" },
      { title: "Play around in JSFiddle", action: "m3"},
      { title: "Build something awesome", action: "m4"}
    ]
  },
  methods: {
    invokeMethod(methodName) {
        this[methodName]();
    },
    m1() {
        console.log('1');
    },
    m2() {
        console.log('2');
    },
    m3() {
        console.log('3');
    },
    m4() {
        console.log('4');
    }
  }
})

Answer 2

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
   <div v-for="item in items">
       <a @click="invokeMethod(item.action)" href="#">
         {{ item.title }}
       </a>
   </div>
</div>

应该是一个功能

data

但是z zxswい

Answer 3

您需要在单个方法中传递item对象，然后根据您的要求进行操作。

new Vue({
  el: "#app",
  data () {
    return {
      items: [
        { title: "Learn JavaScript", action: this.m1 },
        { title: "Learn Vue", action: this.m2 },
        { title: "Play around in JSFiddle", action: this.m3},
        { title: "Build something awesome", action: this.m4}
     ]
    }
  },
  methods: {
    m1() {
        console.log('1');
    },
    m2() {
        console.log('2');
    },
    m3() {
        console.log('3');
    },
    m4() {
        console.log('4');
    }
  }
})

https://jsfiddle.net/ojdz0r41/