vue js在同一頁面上多次使用組件

Question

開發人員，我有一個小問題我想重用一個使用Vuejs創建的組件，但是所有創建的實例仍然相互鏈接我的意思是，例如，當我單擊一個實例時，所有其他實例都會受到影響我需要在每個實例之間分開必須在頁面上獨一無二
我正在使用的技術- 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"  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變量。 給他們不同的會議對象。

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

循環應該有一個關鍵指令。

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