[英]Why does my item-list not work in Vue.js?
I tried to create my first Vue.js app on my own and therefore relied on the documentation.我尝试自己创建我的第一个 Vue.js 应用程序,因此依赖于文档。 But there is an error I can not solve.
但是有一个错误我无法解决。 I tried to rebuild the app like in the documentation and made some mistake.
我尝试像文档中那样重建应用程序并犯了一些错误。 The list doesn't display the items and it doesn't add new items to the list.
该列表不显示项目,也不会将新项目添加到列表中。 I would be grateful if anyone could give me any advice.
如果有人能给我任何建议,我将不胜感激。 Yours
你的
Vue.component('workout-item', {
template: '\
<li>\
{{ title }}\
{{ workoutGoal }}\
{{ workoutDone }} \
<button v-on:click="$emit(\'remove\')">Remove</button>\
</li>\
',
props: {
title: String,
workOutGoal: Number,
workoutDone: Number
}
})
new Vue({
el: '#workout-list-example',
data: {
newWorkoutText: '',
newWorkoutGoal: '',
newWorkoutDone: '',
workouts: [
{
id: 1,
title: 'Sit-ups',
workoutGoal: 10,
workoutDone: 0,
},
{
id: 2,
title: 'Crunches',
workoutGoal: 15,
workoutDone: 0,
},
{
id: 3,
title: 'Lift-ups',
workoutGoal: 16,
workoutDone: 0,
}
],
nextWorkoutId: 4
},
methods: {
addNewWorkout: function() {
this.workouts.push({
id: this.nextWorkoutId++,
title: this.newWorkoutText,
workoutGoal: this.newWorkoutGoal,
workoutDone: this.newWorkoutDone
})
this.newWorkoutText=''
this.newWorkoutGoal=''
this.newWorkoutDone=''
}
}
})
<div id="book-list-example">
<form v-on:submit.prevent="addNewBook">
<label for="new-book">Add a Book</label>
<input
v-model="newBookText"
id="new-book"
placeholder="E.g. Three women"
>
<button>Append</button>
</form>
<ul>
<li
is="book-item"
v-for="(book, index) in books"
v-bind:key="book.id"
v-bind:title="book.title"
v-on:remove="books.splice(index, 1)"
></li>
</ul>
</div>
<div id="workout-list-example">
<form v-on:submit.prevent="addNewWorkout">
<label for="new-workout">Add a workout</label>
<input
v-model="newWorkoutText"
id="new-workout"
placeholder="E.g. Push-ups"
>
<input
v-model="newWorkoutGoal"
id="new-workout"
placeholder="E.g. 10"
>
<input
v-model="newWorkoutDone"
id="new-workout"
placeholder="E.g. 5"
>
<button>Append</button>
</form>
<ul>
<li
is="workout-item"
v-for="(workout, index) in workouts"
v-bind:key="workout.id"
v-bind:title="workout.title"
v-bind:workoutGoal="workout.workoutGoal"
v-bind:workoutDone="workout.workoutDone"
v-on:remove="workouts.splice(index, 1)"
></li>
</ul>
</div>
There is a prop's name mistake for workoutGoal
into your props declaration code (it's case sensitive).你的道具声明代码中有一个道具名称错误,用于
workoutGoal
(它区分大小写)。
(I will ignore the div for the book list here) (这里我将忽略书单的 div)
props: {
title: String,
workOutGoal: Number,
workoutDone: Number
}
Should be:应该:
props: {
title: String,
workoutGoal: Number, // lowercase on 'Out'
workoutDone: Number
}
Then to use your props, you should use "kebab-case" (hyphen separator).然后使用你的道具,你应该使用“kebab-case”(连字符分隔符)。 For eg:
myLovelyProp
is bound as my-lovely-prop
( https://v2.vuejs.org/v2/guide/components-props.html ):例如:
myLovelyProp
绑定为my-lovely-prop
( https://v2.vuejs.org/v2/guide/components-props.html ):
<li
...
v-bind:workoutGoal="workout.workoutGoal"
v-bind:workoutDone="workout.workoutDone"
...
></li>
Should be:应该:
<li
...
v-bind:workout-goal="workout.workoutGoal"
v-bind:workout-done="workout.workoutDone"
...
></li>
Finally, do not forget to cast your workout goal and workout done inputs to Number.最后,不要忘记将您的锻炼目标和锻炼完成输入输入到 Number。 Since you get it like a string from the field, to match your prop's types:
由于您从字段中获取它就像一个字符串,因此要匹配您的道具类型:
addNewWorkout: function() {
this.workouts.push({
...
workoutGoal: Number(this.newWorkoutGoal), // Cast string to number value.
workoutDone: Number(this.newWorkoutDone) // Cast string to number value.
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.