Javascript 为什么我的项目列表在Vue.js中不起作用？

我试图自己创建我的第一个Vue.js应用程序，因此依赖于文档。但有一个错误我无法解决。我试图像文档中那样重建应用程序，但犯了一些错误。列表不显示项目，也不向列表中添加新项目。如果有人能给我任何建议，我将不胜感激。 你的

Vue.component（'workout-item'）{
模板：'\
\
{{title}}\
{{workoutGoal}}\
{{workoutDone}}\
除去\
\
',
道具：{
标题：字符串，
目标：数量，
完成的训练：数字
}
})
新Vue({
el:“#训练列表示例”，
数据：{
newWorkoutText:“”，
新工作目标：“”，
newWorkoutDone:“”，
训练：[
{
id:1，
标题:"仰卧起坐",，
目标：10，
训练完成：0，
},
{
id:2，
标题：“嘎吱嘎吱嘎吱”，
目标：15，
训练完成：0，
},
{
id:3，
标题:"升降机",，
目标：16，
训练完成：0，
}
],
nextWorkoutId:4
},
方法：{
addNewWorkout:function（）{
这是运动，推({
id:this.nextWorkoutId++，
标题：this.newWorkoutText，
workoutGoal:this.newWorkoutGoal，
workoutDone:this.newWorkoutDone
})
this.newWorkoutText=''
此.newWorkoutGoal=''
此。newWorkoutDone=“”
}
}
})
添加一本书
追加



添加一项训练
追加

在您的道具声明代码中有一个道具名称错误，即

workoutGoal

（区分大小写）

（我将忽略此处图书列表的div）

道具：{
标题：字符串，
目标：数量，
完成的训练：数字
}

应该是：

道具：{
标题：字符串，
workoutGoal:Number，//在'Out'上小写
完成的训练：数字
}

然后要使用道具，您应该使用“烤肉串盒”（连字符分隔符）。例如：

myLovelyProp

绑定为

myLovelyProp

（）：

应该是：

最后，不要忘记将您的训练目标和训练完成输入转换为数字。因为它就像一根弦一样从场中获得，所以要匹配道具的类型：

addNewWorkout:function（）{
这是运动，推({
...
workoutGoal:Number（this.newWorkoutGoal），//将字符串强制转换为Number值。
workoutDone:Number（this.newWorkoutDone）//将字符串强制转换为Number值。
})

非常感谢

 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>