将循环变量作为HTML中的函数参数传递 <input> 带vue.js的onclick属性

Question

我想在vue.js创建一个简单的待办事项列表 ，以使自己适应它。

现在，我在每个项目之后都放置了一个删除按钮。 为此，我在javascript中添加了带有参数id的remove()函数，该参数id是待办事项列表项的id以及带有按钮的onclick属性。 但是问题是我找不到一种将项目（使用v-for创建的循环变量） id作为参数传递给onclick属性内的remove()函数的方法。

所以，到目前为止，我的脚本看起来像这样...

的HTML

...
<ul>
    <li v-for="item in items">
        {{ item.label }}
        <input type="button" value="x" onclick="app.remove(item.id)">

        <!-- item.id does not work -->
    </li>

    <li>
        <input type="text" v-model="new_item" onkeypress="app.input_keydown(event)">
        <input type="submit" value="+ Add" onclick="app.add()">
    </li>
</ul>
...

JS

...
data: {
    items: [
        {id: 1, label: "One"},
        {id: 2, label: "Two"}, 
        {id: 3, label: "Three"}, 
        {id: 4, label: "Four"},
    ],

    add: function() {
        // let item = prompt("Add Item", "New Item");

        if (app.new_item) {
            app.items.push(app.new_item);
        }
    },

    remove: function(id) {
        for (index in app.items) {
            if (app.items[index].id == id) {
                app.items.splice(index, 1);
            }
        }
    },
}
...

我的简单待办事项清单如下所示：

另外，我想知道是否必须在任何 HTML属性中传递循环变量，我该怎么做？

Answer 1

您必须使用Vue.js特殊事件处理程序，而不是html处理程序。 onclick="app.remove(item.id)"应该是@click="remove(item.id)" 。

您还必须将add和delete方法提取到methods属性。 它们不能包含在data 。