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>