如何用v-for指定v-on
如何用v-for指定v-on
提问于 2022-10-11 04:47:06
我在Vue中有一个代码，它使用Vue创建菜单的元素，每个元素在单击时必须有一个不同的方法。
到目前为止我有这样的想法：
<span v-for="(menuItem, index) in menuItems" :key="index">
<li>
<a id="listItem">
<i class="bx" :class="menuItem.icon || 'bx-square-rounded'" />
<span class="links_name" v-on:click=menuItem.click>{{ menuItem.name }}</span>
</a>
<span class="tooltip">{{
menuItem.tooltip || menuItem.name
}}</span>
</li>
</span>我怎样才能在v-on上分配不同的乐趣呢？
回答 1
Stack Overflow用户
发布于 2022-10-11 08:21:40
您可以将侦听器函数作为对象列表中的节点。
示例实现
const app = new Vue({
el: '#app',
data() {
return {
list: [{
name: 'lg',
age: 27,
onClick: function() {
console.log("First Item Clicked");
}
}, {
name: 'camile',
age: 27,
onClick: function() {
console.log("Second Item Clicked");
}
}]
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in list" :key="item.name">
{{item.name}} - {{item.age}}
<button @click="item.onClick()">
Click Me
</button>
</li>
</ul>
<input type="text" v-model="list[0].name">
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74023093
复制相关文章
相似问题
腾讯云开发者
