Estoy creando un componente de edición simple en el que el objeto que se va a editar se asigna como accesorio del componente.
Por ejemplo:
export default { name: "EditPersonModal", props: { person: {}, } ... } Un objeto de person contiene un objeto de address , que a su vez contiene city , state , zip , etc.
Dentro del componente, no es posible modelar los campos de dirección con v-model="person.address.city" ya que person.address es nulo.
Una solución a esto es verificar person.address en la creación y configurarlo en {} si no está definido; sin embargo, esto da como resultado que la propiedad vacía llegue al backend. Obviamente, podría verificar esto y anular la propiedad antes de cualquier procesamiento adicional, pero ¿hay algún limpiador para hacer esto que no implique verificar cada uno de los campos de un objeto secundario?
El mismo problema también se enfrenta en un componente Agregar
¡Gracias!
Como comentó @TrietDoan, debe evitar mutar accesorios directamente en el componente secundario. En lugar de v-model , solo use :value y luego use el encadenamiento opcional:
Vue.component('Child', { template: ` <textarea :value="person.address?.city ?? ''" @input="$emit('input', $event.target.value)"></textarea> `, props: { person: {}, } }) new Vue({ el: '#demo', data() { return { item: {name: 'pers', address: {city: 'city'}}, } }, methods: { updateCity(city) { this.item.address.city = city } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <p>{{ item.address.city }}</p> <Child :person="item" @input="updateCity" /> </div>Podrías usar el encadenamiento opcional:
v-model="person.address?.city ?? ''"
person.address?.city significa que si person.address es null o undefined , devuelve null .
El ?? operador devuelve el resultado de la derecha si el operador de la izquierda es null