假設(shè)我有這個:
<v-btn v-for="action in actions" :key="action.icon" :disabled="action.disabled" icon @click="action.click(item.id)"> <v-icon>{{ action.icon }}</v-icon> </v-btn>
動作定義如下:
export default { props: { rowEditingDisabled: Boolean, }, data() { return { actions: [ {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit}, ], }; }, };
如何才能在元件屬性「rowEditingDisabled」更新時更新停用屬性?
這是一個片段,展示了我的意思:
Vue.component('child', { template: ` <div> <v-btn :disabled="rowEditingDisabled">This works!</v-btn> <v-btn v-for="action in actions" :key="action.icon" :disabled="action.disabled" icon @click="action.click(item.id)"> <v-icon>{{ action.icon }}</v-icon> </v-btn> </div>`, props: { rowEditingDisabled: Boolean, }, data() { return { actions: [ {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit}, ], }; }, }) new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { isDisabled: true }; }, created() { setInterval(() => { this.isDisabled = !this.isDisabled; }, 1000); }, })
<link rel="stylesheet"> <link rel="stylesheet"> <link rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <child :row-editing-disabled="isDisabled"></child> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
當(dāng)我只使用 prop 時它可以工作,但是當(dāng)我將它放入數(shù)組中時它就不再工作了。
請確保您觀察道具中的更改,如下所示:
export default { props: { rowEditingDisabled: Boolean, }, data() { return { actions: [{ icon: 'mdi-pencil', disabled: false, click: this.edit }], }; }, watch: { rowEditingDisabled: function(newVal, oldVal) { // watch it console.log('Prop changed: ', newVal, ' | was: ', oldVal); this.actions[0].disabled = newVal; } }, };