假设我有这个：
{{ action.icon }}
动作定义如下：
1
807export default {
props: {
rowEditingDisabled: Boolean,
},
data() {
return {
actions: [
{icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
],
};
},
};
如何才能在组件属性“rowEditingDisabled”更新时更新禁用属性？
这是一个片段，展示了我的意思：
Vue.component('child', {
template: `
This works!
{{ action.icon }}
`,
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);
},
})
当我只使用 prop 时它可以工作，但是当我将它放入数组中时它就不再工作了。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
请确保您观察道具中的更改，如下所示：
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; } }, };