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

開發人員，我有一個小問題 我想重用使用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>

uj5u.com熱心網友回復：

回圈應該有一個 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>

uj5u.com熱心網友回復：

那是因為您的所有組件都使用相同的值，您甚至不會item, index在回圈中的任何地方使用vars。給他們不同的會議物件。

標籤：javascript Vue.js symfony Vuejs2

上一篇：還記得LauncherForActivityResult導致組合丟失狀態嗎？

下一篇：注銷后如何停止Symfony重定向