Soy nuevo en Vuejs. Hice algo, pero no sé si es de la manera correcta o simple.

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();

Presiono () nada en la matriz y se actualizará ... Pero a veces el último elemento se ocultará, de alguna manera ... Creo que esta solución es un poco hacky, ¿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>

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] = 2ni 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>

EDITAR 2

• Para todos los cambios de objetos que necesitan reactividad, utiliceVue.set(object, prop, value)
• Para las mutaciones de matriz, puede consultar la lista admitida actualmente aquí

EDITAR 1

Para vuex querrás 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 link .

Como se indicó anteriormente, VueJS simplemente no puede rastrear esas operaciones (asignación de elementos de matriz). Todas las operaciones rastreadas por VueJS con array están aquí . Pero los copiaré una vez más:

• empujar()
• popular()
• cambio()
• unshift ()
• empalme()
• ordenar()
• contrarrestar()

Durante el desarrollo, te enfrentas a un problema: cómo vivir con eso :).

push (), pop (), shift (), unshift (), sort () y reverse () son bastante simples y lo ayudan en algunos casos, pero el enfoque principal se encuentra dentro del splice () , que le permite modificar efectivamente la matriz que sería rastreado por VueJs. Así que puedo compartir algunos de los enfoques que más se utilizan para trabajar con matrices.

Necesita reemplazar el elemento en la matriz:

// 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 de la siguiente manera:

this.values[index].itemField = newItemFieldValue

Y esto sería rastreado por VueJS ya que los campos del elemento (Objeto) serían rastreados.

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 varios registros, eliminar varios registros, etc.

Vue.set () y Vue.delete ()

Vue.set () y Vue.delete () pueden usarse para agregar un campo a la versión de datos de la interfaz de usuario. Por ejemplo, necesita algunos datos o indicadores calculados adicionales dentro de sus objetos. Puede hacer esto para sus objetos o lista de objetos (en el ciclo):

 Vue.set(plan, 'editEnabled', true) //(or this.$set)

Y envíe los datos editados de vuelta al back-end en el mismo formato haciendo esto antes de la llamada de Axios:

 Vue.delete(plan, 'editEnabled') //(or this.$delete)

Una alternativa, y un enfoque más ligero para su problema, podría ser simplemente editar la matriz temporalmente y luego asignar la matriz completa a su variable. Porque como Vue no observa elementos individuales, verá la actualización de toda la variable.

Entonces esto debería funcionar también:

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

Esto también debería actualizar su DOM.