假设我有这个：
<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 href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" 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>
当我只使用 prop 时它可以工作，但是当我将它放入数组中时它就不再工作了。
请确保您观察道具中的更改，如下所示：
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; } }, };