vuetify: ^2.5.10 vuex: ^3.6.2 vue: ^2.6.14
我有一個用 v-tabs 開發的應用程式。在這些選項卡中第一個的子組件中，我有一個
<v-file-input
v-model="file"
outlined
:rules="selector_rules"
:clearable="false"
:show-size="1000">
</v-file-input>
<v-btn color="primary" @click="commitData" >Commit</v-btn>
和
commitData() {
this.$store.commit('setFile', this.file)
},
商店得到正確設定，因為父組件中的以下計算屬性
computed: {
...mapGetters({
file: 'getFile',
}),
},
似乎有效：我以這種方式觀看它：
file: {
deep: true,
immediate: true,
handler() {
console.log("Received file: " this.file);
}
},
至少對我而言，令人驚訝的是，在第二個選項卡中的另一個組件中實作的與上面完全相同的手表在我訪問（即切換到）第二個面板之前不起作用。但是，計算屬性在此組件中有效，因為在模板中我可以看到新屬性。
第一次訪問選項卡后，手表繼續正常作業。
是否有原因以及避免訪問它以使手表正常作業的方法？
uj5u.com熱心網友回復：
v-tabs僅在訪問時加載內容。這意味著組件只有在它處于活動狀態時才會安裝。
你可以eager在你的v-tab-item組件上使用prop來確保它們總是被加載和安裝。
API 檔案參考：https : //vuetifyjs.com/en/api/v-tab-item/#props-eager
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344812.html
標籤：Vue.js vuetify.js Vuex vuetify-tabs