Why does my item-list not work in Vue.js?

Question

I tried to create my first Vue.js app on my own and therefore relied on the documentation. 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>

tony19 · Accepted Answer · 2022-07-15 05:08:03Z

1

There is a prop's name mistake for workoutGoal into your props declaration code (it's case sensitive).

(I will ignore the div for the book list here)

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). For e.g: myLovelyProp is bound as 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. 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.
})

edited Jul 15, 2022 at 5:08

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 13, 2020 at 19:57

Adri1

3611 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JOJO Piano Over a year ago

Thank you very much

Collectives™ on Stack Overflow

Why does my item-list not work in Vue.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related