Tengo un proyecto Nuxt con componentes Buefy. Hay un formulario con algún componente de campo que debería reaccionar ante un error de acuerdo con el parámetro del mensaje para este componente. Pero no lo hace. Puedo ver el valor correcto en el depurador pero el componente no muestra el mensaje. :la propiedad del mensaje debería funcionar como en el primer ejemplo de correo electrónico de la documentación
El código se parece a:
<template #company> <h2 class="title">{{ $t('general.login.create_company') }}</h2> <b-field :type="loginErrors.company_name ? 'is-danger' : ''" :message="loginErrors.company_name ? loginErrors.company_name : ''" > <b-input v-model="companyName" name="company_name" type="text" autocomplete="off" :placeholder="$t('general.login.create_company')" ></b-input> </b-field> <div class="buttons is-centered"> <b-button type="is-primary is-light" @click="createCompany">Save</b-button> </div> </template> ... data() { return { ... loginErrors: {}, error: 'aaaaaa', }; }, ... async createCompany() { const result = await this.$api.users.createCompany({company_name: this.companyName}); if( result.error ) { this.loginErrors.company_name = result.error; // This does not work although the variable has correct value set this.error = result.error; // This works fine return false; } },Uso este patrón en otros componentes y funciona. no lo entiendo gracias por cualquier ayuda.
la detección de cambios de objetos de datos en Vue es superficial (solo nivel superior)
En vue.js , la propiedad agregada dinámicamente a un objeto no es reactiva. En su lugar, podemos asignar un objeto completo para que ocurra la detección de cambios.
Para una mejor comprensión, consulte esta documentación oficial de Vue.
demostración:
new Vue({ el: '#app', data() { return { loginErrors: {} } }, mounted() { this.loginErrors = { company_name: 'some value' } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p>{{ loginErrors.company_name ? 'is-danger' : 'no-danger' }}</p> </div>No creo que los componentes de Vue reaccionen a la propiedad del objeto modificada de manera directa, podría intentar this.$set(this.loginErrors, 'company_name', result.error); en lugar de this.loginErrors.company_name = result.error;
FYI: https://v2.vuejs.org/v2/guide/reactivity.html?redirect=true#Change-Detection-Caveats
La solución en este caso fue actualizar la versión de Buefy de la 0.4.11 a la 0.4.21. Esto soluciona el problema. Otra cosa es que causa un nuevo problema con :type en combinación con el parámetro agrupado.