Soy nuevo en Vuejs. Hice algo, pero no sé si es la forma simple/correcta.
lo que quiero
Quiero algunas fechas en una matriz y actualizarlas en un evento. Primero probé Vue.set, pero no funcionó. Ahora, después de cambiar mi elemento de matriz:
this.items[index] = val; this.items.push();
Empujo() nada a la matriz y se actualizará... Pero a veces el último elemento se ocultará, de alguna manera... Creo que esta solución es un poco complicada, ¿cómo puedo hacerla estable?
El código simple está aquí:
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[index] = val; this.items.push(); console.log("arr length: " + this.items.length); } } })
ul { list-style-type: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <div id="app"> <ul> <li v-for="(index, item) in items"> <br><br> <button v-on:click="cha(index, item, 'day', -1)"> - day</button> {{ item }} <button v-on:click="cha(index, item, 'day', 1)"> + day</button> <br><br> </li> </ul> </div>
Vue.set(object, prop, value)
Para vuex, querrá hacer Vue.set(state.object, key, value)
Entonces, solo para otros que vienen a esta pregunta. Aparece en algún momento en Vue 2.* eliminaron this.items.$set(index, val)
a favor de this.$set(this.items, index, val)
.
Splice todavía está disponible y aquí hay un enlace a los métodos de mutación de matriz disponibles en vue link .
VueJS no puede recoger sus cambios en el estado si manipula matrices como esta.
Como se explica en Common Beginner Gotchas , debe usar métodos de matriz como empujar, empalmar o lo que sea y nunca modificar los índices como este a[2] = 2
ni la propiedad .length de una matriz.
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; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script> <div id="app"> <ul> <li v-for="(index, item) in items"> <br><br> <button v-on:click="cha(index, item, 'day', -1)"> - day</button> {{ item }} <button v-on:click="cha(index, item, 'day', 1)"> + day</button> <br><br> </li> </ul> </div>
Como se indicó anteriormente, VueJS simplemente no puede rastrear esas operaciones (asignación de elementos de matriz). Todas las operaciones rastreadas por VueJS con matriz están aquí . Pero los copiaré una vez más:
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 splice() , que le permite modificar efectivamente la matriz 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).
Necesitas vaciar la matriz:
this.values.splice(0, this.values.length)
En realidad, puede hacer mucho más con esta función splice() - 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)