為什么我的項目列表在 Vue.js 中不起作用？

Question

我嘗試自己創建我的第一個 Vue.js 應用程序，因此依賴於文檔。 但是有一個錯誤我無法解決。 我嘗試像文檔中那樣重建應用程序並犯了一些錯誤。 該列表不顯示項目，也不會將新項目添加到列表中。 如果有人能給我任何建議，我將不勝感激。 你的

 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>

Answer 1

你的道具聲明代碼中有一個道具名稱錯誤，用於workoutGoal （它區分大小寫）。

（這里我將忽略書單的 div）

props: {
  title: String,
  workOutGoal: Number,
  workoutDone: Number
}

應該：

props: {
  title: String,
  workoutGoal: Number, // lowercase on 'Out'
  workoutDone: Number
}

然后使用你的道具，你應該使用“kebab-case”（連字符分隔符）。 例如： 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>

應該：

<li
  ...
  v-bind:workout-goal="workout.workoutGoal"
  v-bind:workout-done="workout.workoutDone"
  ...
></li>

最后，不要忘記將您的鍛煉目標和鍛煉完成輸入輸入到 Number。 由於您從字段中獲取它就像一個字符串，因此要匹配您的道具類型：

addNewWorkout: function() {
   this.workouts.push({
   ...
   workoutGoal: Number(this.newWorkoutGoal), // Cast string to number value.
   workoutDone: Number(this.newWorkoutDone)  // Cast string to number value.
})