Nuestro grupo especializado luego de días de trabajo y de recopilar de información, encontramos la solución, esperamos que resulte útil para ti en tu proyecto.
Solución:
EDITAR 2
- Para todos cambios de objeto que necesitan uso de reactividad
Vue.set(object, prop, value) - Para array mutaciones, puede ver la lista admitida actualmente aquí
EDITAR 1
Para vuex querrás hacer Vue.set(state.object, key, value)
Original
Entonces, solo para otros que vienen a esta pregunta. Aparece en algún momento en Vue 2.* lo quitaron this.items.$set(index, val) a favor de this.$set(this.items, index, val).
Empalme todavía está disponible y aquí hay un enlace a array métodos de mutación disponibles en vue link.
VueJS no puede recoger sus cambios en el estado si manipula matrices como esta.
Como se explica en Problemas comunes para principiantes, debe usar array métodos como empujar, empalmar o lo que sea y nunca modificar los índices como este a[2] = 2 ni la propiedad .length de un array.
new Vue(
el: '#app',
data:
f: 'DD-MM-YYYY',
items: [
"10-03-2017",
"12-03-2017"
]
,
methods:
cha: function(index, item, what, count)
console.log(item + " index > " + index);
val = moment(this.items[index], this.f).add(count, what).format(this.f);
this.items.$set(index, val)
console.log("arr length: " + this.items.length);
)ul
list-style-type: none;
-
item
Como se indicó anteriormente, VueJS simplemente no puede rastrear esas operaciones (array asignación de elementos). Todas las operaciones que son rastreadas por VueJS con array están aquí. Pero los copiaré una vez más:
- empujar()
- estallido()
- cambio()
- anular desplazamiento()
- empalme()
- clasificar()
- contrarrestar()
Durante el desarrollo, te enfrentas a un problema: cómo vivir con eso :).
push(), pop(), shift(), unshift(), sort() y reverse() son bastante sencillos y lo ayudan en algunos casos, pero el enfoque principal se encuentra dentro de la empalme()que le permite modificar efectivamente la array eso sería rastreado por VueJs. Así que puedo compartir algunos de los enfoques que se usan más al trabajar con arreglos.
Necesitas reemplazar Item en Array:
// note - findIndex might be replaced with some(), filter(), forEach()
// or any other function/approach if you need
// additional browser support, or you might use a polyfill
const index = this.values.findIndex(item =>
return (replacementItem.id === item.id)
)
this.values.splice(index, 1, replacementItem)
Nota: si solo necesita modificar un campo de elemento, puede hacerlo simplemente:
this.values[index].itemField = newItemFieldValue
Y esto sería rastreado por VueJS como se rastrearían los campos del elemento (Objeto).
Tienes que vaciar el array:
this.values.splice(0, this.values.length)
En realidad puedes hacer mucho más con esta función empalme () – enlace w3schools Puede agregar múltiples registros, eliminar múltiples registros, etc.
Vue.set() y Vue.delete()
Vue.set() y Vue.delete() se pueden usar para agregar campos a la versión de datos de la interfaz de usuario. Por ejemplo, necesita algunos indicadores o datos calculados adicionales dentro de sus objetos. Puede hacer esto para sus objetos o lista de objetos (en el bucle):
Vue.set(plan, 'editEnabled', true) //(or this.$set)
Y envíe los datos editados al back-end en el mismo formato haciendo esto antes de la llamada de Axios:
Vue.delete(plan, 'editEnabled') //(or this.$delete)