javascript - example - vue props default

Vuejs y Vue.set(), matriz de actualización

Question

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 estará oculto, de alguna manera ... Creo que esta solución es un poco extraña, ¿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>

Answer 1

EDITAR 2

• Para todos los cambios de objeto que necesitan reactividad, use Vue.set(object, prop, value)
• Para las mutaciones de la matriz, puede consultar la lista admitida actualmente here

EDITAR 1

Para vuex, querrá hacer Vue.set(state.object, key, value)

Original

Así que 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 here .

Answer 2

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 push, splice o lo que sea y nunca modificar los índices como 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>