將循環變量作為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 。