developers, I have a little problem I would like to reuse a component created using Vuejs but all created instances are still linked between each other I mean for example when I click on instance one all other instances are affected I need to separate between each one must be unique on the page
The technologies I'm using - VueJS 2 - twig - Symfony

and also **VueMeetingSelector** is a component I would like to use it 

my code 
<br>

**app2.vue**



    <template>
      <div id="app2">
        <div v-for="(item,index) in items"   style="width: 100%">
            <span style="display: inline-block;width: 65%;">
                 <vue-meeting-selector
                     :id="someth"
                     className="simple-example__meeting-selector"
                     v-model="meeting"
                     :date="date"
                     :loading="loading"
                     :class-names="classNames"
                     :meetings-days="meetingsDays"
                     @next-date="nextDate"
                     @previous-date="previousDate"
                 />
    
                  <p>meeting Selected: {{ meeting ? meeting : "No Meeting selected" }}</p>
            </span>
        </div>
      </div>
    </template>
    <script>
    import VueMeetingSelector from 'vue-meeting-selector';
    import axios from "axios"
    export default {
      name: "App2",
      components: {
        VueMeetingSelector,
      },
      data() {
        return {
          date: new Date(),
          meetingsDays: [],
          meeting: {date: "2021-01-15T08:00:00.000Z"},
          loading: true,
          nbDaysToDisplay: 1,
          multi:true,
          idDocteur: 0,
          items:5
        };
      },
      methods: {
        // @click on button-right
        async nextDate()
        {
          axios
              .get('https://127.0.0.1:8000/adsApi')
              .then(response => (this.meetingsDays = response.data ))
    
          
          console.log("nextDate");
        },
        // @click on button-left
        async previousDate() {
          console.log("previousDate");
        },
      },
      async created() {
        this.meetingsDays = [
          {
            "date": "2021-11-22T06:00:00.000000Z",
            "slots": [
              { "date": "2021-11-22T06:00:00.000000Z" },
              { "date": "2021-11-22T06:30:00.000000Z" },
              { "date": "2021-11-22T06:00:00.000000Z" },
              { "date": "2021-11-22T06:30:00.000000Z" },
              { "date": "2021-11-22T06:00:00.000000Z" },
              { "date": "2021-11-22T06:30:00.000000Z" },
              { "date": "2021-11-22T06:00:00.000000Z" },
              { "date": "2021-11-22T06:30:00.000000Z" }
            ]
          }
        ];
        this.loading = false;
      },
    };
    </script>

<br>

**app.js**
<pre>
import Vue from "vue";
import App2 from "./js/App2";

new Vue({
    el: '#app2',
    render: h => h(App2)
});
</pre>
<br>

**test.twig.html**

<br>


<div id="wrapper">
    <!-- Content-->
    <div >
        <!--section -->
    hello this is a test page
        <div id="app2">
            <App2></App2>
        </div>
    </div>
</div>
    <script>
    import App2 from "../assets/js/App2";
    export default {
        components: {App2}
    }
</script>

CodePudding user response：

that's because all your components use the same values, you don't even use item, index vars anywhere in your loop. Give them different meeting objects.

CodePudding user response：

Your v-model value to every component is the same. They should be different. Try this.

<vue-meeting-selector
    className="simple-example__meeting-selector"
    v-model="meeting[index]"
    :date="date"
    :loading="loading"
    :class-names="classNames"
    :meetings-days="meetingsDays"
    :key="index"
    @next-date="nextDate"
    @previous-date="previousDate"
/>

And

data() {
    return {
        ...
        meeting: ["2021-01-15T08:00:00.000Z", "2021-01-16T08:00:00.000Z", "2021-01-17T08:00:00.000Z"],
        ....
    };
},

Please note that your index should be numeric which I am assuming it is.

CodePudding user response：

loops should have a key directive.

 <div v-for="(item,index) in items"   style="width: 100%" :key="index">
        <span style="display: inline-block;width: 65%;">
             <vue-meeting-selector
                 :id="someth"
                 className="simple-example__meeting-selector"
                 v-model="meeting"
                 :date="date"
                 :loading="loading"
                 :class-names="classNames"
                 :meetings-days="meetingsDays"
                 @next-date="nextDate"
                 @previous-date="previousDate"
             />

              <p>meeting Selected: {{ meeting ? meeting : "No Meeting selected" }}</p>
        </span>
    </div>