vue js在同一页面上多次使用组件

Question

开发人员， 我有一个小问题我想重用一个使用 Vuejs 创建的组件，但是所有创建的实例仍然相互链接我的意思是，例如，当我点击一个实例时，所有其他实例都会受到影响，我需要每一个之间的分隔在页面上必须是唯一的
我正在使用的技术 - VueJS 2 - 树枝 - 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"  class="listing-item" 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 class="content">
        <!--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>

Answer 1

那是因为您的所有组件都使用相同的值，您甚至不会在循环中的任何地方使用item, index vars。 给他们不同的会议对象。

Answer 2

您对每个组件的v-model 值都是相同的。他们应该是不同的。试试这个。

<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"
/>

和

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

请注意，您的索引应该是我假设的数字。

Answer 3

循环应该有一个 key 指令。

 <div v-for="(item,index) in items"  class="listing-item" 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>