Consider this scenario:
<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>
The 'actions' object is defined as follows:
export default {
props: {
rowEditingDisabled: Boolean,
},
data() {
return {
actions: [
{icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
],
};
},
};
How can I ensure the 'disabled' property updates when the 'rowEditingDisabled' prop of the component is updated?
This code snippet illustrates the issue:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2848d8c96a2d4cc9a">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cfccdccdd0dfc0f98b97c1">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbbdbeae8bf9e5b3">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2a4a7b7a6bbb4ab92e0fcaa">[email protected]</a>/dist/vuetify.js"></script>While the use of the prop works fine, the same behavior seems to break when included within an array.