He comenzado a jugar un poco con Vue y Vuetify, el marco es bastante estelar. Pero un problema que parece haber encontrado es si tengo un objeto:
account: { name: "", customer: { orders: [] } }Cuando Vue vincula el modelo, el objeto se adhiere a esos valores. Pero si cierro un formulario, tengo que volver a establecer manualmente un valor predeterminado para ignorar el mensaje enlazado.
this.account.name = "";Volver a establecer el valor predeterminado cuando se montó el componente parece un poco raro. ¿Hay alguna forma de que los datos vuelvan a estar montados de forma predeterminada sin forzar que el componente se vuelva a procesar?
Una forma de hacer esto es definir una función fuera del componente para devolver los data . Este último se usaría como valor inicial y al reiniciar:
const getDefaultData = () => ({ account: { name: "", customer: { orders: [] } } }); new Vue({ el: "#app", data: getDefaultData, methods: { reset() { Object.assign(this.$data, getDefaultData()); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div>{{account}}</div> <form><input v-model="account.name" /></form> <button @click="reset">Reset</button> </div>