如何在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>

演示 - https://jsfiddle.net/mezhevikin/eywraw8t/338303/

Answer 1

如果將方法名稱存儲在action屬性中，例如action: "m1" ，則可以通過"invokeMethod(item.action)"將這些名稱傳遞給方法（例如invokeMethod ）。 現在，在這個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'); } } }) 

 <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> 

Answer 2

data應該是一個功能

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/

Answer 3

您需要在單個方法中傳遞item對象，然后根據您的要求進行操作。

 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: { callmethod(item) { console.log(item.action); } } }) 

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <div v-for="item in items"> <a @click="callmethod(item)" href="#"> {{ item.title }} </a> </div> </div>