[Vuejs]-Multiple Stopwatch using VUe

by

0👍

✅

Here is a solution to your problem jsfiddle

In your code you are mixing the data form your vue instance, with the data of your component.

Instead of having 1 component you can add your component multiple times with the v-for

This is your vue instance + data:

 new Vue({
    el: "#app",
    data() {
        return {
            people: [{
                    id: 1,
                    name: 'Employee 1'
                },
                {
                    id: 2,
                    name: 'Employee 2'
                }
            ]
          }
        }
});

The solution is to pass the data of the person to a component via props (here called item), and render this component as many time as needed in the array. This way, each component is a independent “instance”.

<user-name  v-for="(person, index) in people" :key="person.id" :item="person"></user-name>


Vue.component('user-name', {
            props:['item'],
.....

Leave a comment