Di que tengo esto:
<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>Y las acciones se definen así:
export default { props: { rowEditingDisabled: Boolean, }, data() { return { actions: [ {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit}, ], }; }, };¿Cómo puedo hacer que la propiedad deshabilitada se actualice cuando se actualice el accesorio de componente 'rowEditingDisabled'?
Este es un fragmento que demuestra lo que quiero decir:
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>Funciona cuando solo uso el accesorio, pero cuando lo coloco en una matriz ya no funciona.
Asegúrese de ver los cambios en el accesorio, como este:
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; } }, };A veces, los accesorios pueden recibirse con cierto retraso. En tales casos, para preservar la dinámica, puede hacer uso de computado. Por favor, compruebe las líneas modificadas a continuación
Vue.component('child', { template: ` <div> <v-btn v-for="action in actions" :key="action.icon" :disabled="disableRow" @click="action.click(item.id)"> <!-- ***Changes here*** --> <v-icon>{{ action.icon }}</v-icon> </v-btn> </div>`, props: { rowEditingDisabled: Boolean, }, data() { return { actions: [ {icon: 'mdi-pencil', click: this.edit},// ***Changes here*** ], }; }, // ***Changes here below*** computed: { disableRow() { return this.rowEditingDisabled; } } }) new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { isDisabled: true }; }, created() { // ***Changes here*** // Commenting the below becoz it changes the flag to false /* 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>Desde el método data() , puede hacer referencia a las propiedades del componente usando this.
Puedes probar esto :
data() { return { actions: [ {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit}, ], }; } Actualización: Creé un fragmento de código de muestra de trabajo según mi entendimiento mencionado anteriormente y funciona bien. ¿Puede verificar la convención de nomenclatura de los props en la plantilla? Debe estar separado por guiones. es decir :row-editing-disabled="..." .
Demostración de trabajo :
Vue.component('post', { template: '#post-template', props: { rowEditingDisabled: Boolean }, data() { return { actions: [ {icon: 'mdi-pencil', disabled: this.rowEditingDisabled, click: this.edit} ] }; } }); var vm = new Vue({ el: '#app', data: { isRowEditingDisabled: true, } }); <script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script> <div id="app"> <post :row-editing-disabled="isRowEditingDisabled"></post> </div> <template id="post-template"> <button v-for="action in actions" :key="action.icon" :disabled="action.disabled"> Click Me! </button> </template>