Vue.js组件调用数据属性内部的方法

Question

我想将组件方法分配给数据变量，请参阅下面的示例代码。遗憾的是，它不起作用，正确的方法是什么？

<li v-for="item in items" @click="item.action">
{{ item.title }}
</li>

export default {
data: () => ({
items: [
{ title: "One", action: this.funcOne },
{ title: "Two", action: this.funcTwo },
]
}),
methods: {
funcOne() {
alert("Hi")
},
funcTwo() {
alert("Hello")
}
}
}

Answer 1

尝试将vue实例(this(作为参数传递给数据函数data: (vm) =>，然后使用它action: vm.funcOne

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: (vm) => ({ // vm the component instance this
items: [
{ title: "One", action: vm.funcOne},
{ title: "Two", action: vm.funcTwo },
]
}),
methods: {
funcOne() {
alert("Hi")
},
funcTwo() {
alert("Hello")
}
}
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="app" class="container">
<li v-for="item in items" @click="item.action">
{{ item.title }}
</li>
</div>