如何在 vue.js 模板内的函数内传递 prop?

Question

我正在尝试在我正在制作的待办事项测试站点的模板内的函数内传递一个道具。基本上，我想要一个列表项，其中包括待办事项，旁边有一个删除相同项的按钮。

Vue.component("todo-item", {
props: ["todotext"],
template: "<li>{{todotext.text}} <button v-on:click='removeThisItem({{todotext}})'>X</button></li>",
})
var next_id = 3
var app = new Vue ({
el: "#app",
data: {
message: "",
todos: [
{id: 0, text: "Do assignment"},
]
},
methods: {
addTodoItem: function () {
this.todos.push({id: next_id, text: this.message})
next_id += 1
},
removeThisItem: function removeThisItem (item) {
this.todos.splice(this.todos.indexOf(item))
}
}
})

和 HTML

<div id="app">
<input type="text" name="" v-model="message">
<button type="button" name="button" v-on:click="addTodoItem">Add Todo Item</button>
<ul>
<todo-item
v-for="todo in todos"
v-bind:todotext="todo"
v-bind:key="todo.id">
</todo-item>
</ul>
</div>

但是我收到错误invalid expression: Unexpected token '{' in removeThisItem({{todotext}})有没有办法将 prop 作为此模板内此函数内的参数传递，以便能够删除此列表项？

编辑：这是JSFiddle：https://jsfiddle.net/f6sn52w8/

谢谢！

Answer 1

好吧，试图解决您的 jsfiddle 中的问题，我得到了错误

[Vue warn]: Property or method "outerHTML" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <TodoItem>)

无论如何，我弄清楚了您的代码发生了什么以及为什么它不起作用。

您有使用todo-item组件的父组件：

<!-- parent component -->
<div id="app">
<input type="text" name="" v-model="message">
<button type="button" name="button" v-on:click="addTodoItem">
Add Todo Item
</button>
<ul>
<todo-item
v-for="todo in todos"
v-bind:todotext="todo"
v-bind:key="todo.id">
</todo-item>
</ul>
</div>

方法removeThisItem 是在此组件中声明的，因此它在子组件中不可用<todo-item>，这就是您在控制台中看到错误的原因。

因此，处理单击以删除项的方法是侦听父组件中的事件并从子组件发出事件：

关于速记的注意事项：v-bind:todotext="todo"与:todotext="todo"相同，v-on:click与@click相同

<!-- parent component -->
<div id="app">
<input type="text" name="" v-model="message">
<button type="button" name="button" v-on:click="addTodoItem">
Add Todo Item
</button>
<ul>
<todo-item
v-for="todo in todos"
:todotext="todo"
:key="todo.id"
@removeItem="removeThisItem"> <!-- listen for the removeItem event and run the removeThisItem method when it's triggered -->
</todo-item>
</ul>
</div>

现在必须更新子组件模板：

Vue.component("todo-item", {
props: ["todotext"],
template:
`<li>
{{todotext.text}} 
<button @click="$emit('removeItem', todotext)">X</button>
</li>`,
})

todo-item组件将在单击按钮时发出事件removeItem，并将todotextprop 作为参数发送到将在父级上运行的函数 (removeThisItem(。

更好地解释此行为的另一种方法：

Vue.component("todo-item", {
props: ["todotext"],
template:
`<li>
{{todotext.text}} 
<button @click="emitEventRemoveItem">X</button>
</li>`,
methods: {
emitEventRemoveItem() {
// this.$emit will emit an event to the parent
// the first parameter is the event name, the second parameter
// is the argument that is expected in the parent method that
// will run when the event is triggered, removeThisItem in this case
this.$emit('removeItem', this.todotext);
}
}
})

尝试在您的编辑器中运行它，在 jsfiddle 中我遇到了一个错误。无论如何，问题是您正在尝试从子组件运行在父组件中声明的方法。

让我知道它是否有效或是否出现任何错误。