Andaikan saya mempunyai ini:
<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>
Tindakan ditakrifkan seperti berikut:
export default {
props: {
rowEditingDisabled: Boolean,
},
data() {
return {
actions: [
{icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit},
],
};
},
};
Bagaimana saya boleh mengemas kini harta orang kurang upaya apabila sifat komponen "rowEditingDisabled" dikemas kini?
Berikut ialah klip yang menunjukkan maksud saya:
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>
Ia berfungsi apabila saya hanya menggunakan prop, tetapi apabila saya memasukkannya ke dalam tatasusunan, ia tidak berfungsi lagi.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Pastikan anda memerhatikan perubahan props seperti yang ditunjukkan di bawah:
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; } }, };