Vuejs'de yeniyim. Bir şey yaptım ama bunun basit / doğru yol olduğunu bilmiyorum.

istediğim

Bir dizide bazı tarihler istiyorum ve onları bir etkinlikte güncelle. İlk önce Vue.set'i denedim ama işe yaramadı. Şimdi dizi öğemi değiştirdikten sonra:

this.items[index] = val;
this.items.push();

Diziye () hiçbir şey göndermiyorum ve güncellenecek .. Ama bazen son öğe gizlenecek, bir şekilde ... Sanırım bu çözüm biraz hilekar, onu nasıl kararlı hale getirebilirim?

Basit kod burada:

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>

Dizileri böyle işlerseniz, VueJS durumdaki değişikliklerinizi alamaz.

Common Beginner Gotchas'da açıklandığı gibi, push, splice veya her neyse gibi dizi yöntemlerini kullanmalı ve asla bunun gibi dizinleri a[2] = 2veya bir dizinin .length özelliğini değiştirmemelisiniz .

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>

DÜZENLEME 2

• İçin bütün nesnenin o ihtiyacı reaktivite kullanımını değiştirirVue.set(object, prop, value)
• Dizi mutasyonları için şu anda desteklenen listeye buradan bakabilirsiniz.

DÜZENLE 1

Vuex için yapmak isteyeceksiniz Vue.set(state.object, key, value)

Orijinal

Yani sadece bu soruya gelenler için. Vue 2'de bir noktada ortaya çıkıyor. * this.items.$set(index, val)Lehine çıkardılar this.$set(this.items, index, val).

Splice hala kullanılabilir ve burada vue link'te bulunan dizi mutasyon yöntemlerine bir bağlantı var .

Daha önce belirtildiği gibi - VueJS bu işlemleri izleyemez (dizi öğeleri ataması). Dizi ile VueJS tarafından izlenen tüm işlemler burada . Ama onları bir kez daha kopyalayacağım:

• it()
• pop()
• vardiya()
• unshift ()
• ekleme ()
• çeşit()
• tersine çevirmek()

Geliştirme sırasında bir sorunla karşılaşırsınız - bununla nasıl yaşanır :).

push (), pop (), shift (), unshift (), sort () ve reverse () oldukça basittir ve bazı durumlarda size yardımcı olur, ancak ana odak , diziyi etkili bir şekilde değiştirmenize olanak tanıyan splice () içinde yer alır bu VueJs tarafından izlenecektir. Bu yüzden dizilerle en çok kullanılan yaklaşımlardan bazılarını paylaşabilirim.

Dizideki Öğeyi değiştirmeniz gerekir:

// 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)

Not: Yalnızca bir öğe alanını değiştirmeniz gerekiyorsa - bunu şu şekilde yapabilirsiniz:

this.values[index].itemField = newItemFieldValue

Ve bu, öğe (Nesne) alanları izleneceği için VueJS tarafından izlenecektir.

Diziyi boşaltmanız gerekiyor:

this.values.splice(0, this.values.length)

Aslında bu fonksiyonla çok daha fazlasını yapabilirsiniz splice () - w3schools link Birden fazla kayıt ekleyebilir, birden fazla kaydı silebilir, vb.

Vue.set () ve Vue.delete ()

Verilerin UI sürümünüze alan eklemek için Vue.set () ve Vue.delete () kullanılabilir. Örneğin, nesnelerinizin içinde bazı ek hesaplanmış verilere veya bayraklara ihtiyacınız vardır. Bunu nesneleriniz veya nesne listesi (döngüdeki) için yapabilirsiniz:

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

Ve Axios çağrısından önce bunu yaparak düzenlenmiş verileri arka uca aynı formatta geri gönderin:

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

Bir alternatif - ve probleminize daha hafif bir yaklaşım - diziyi geçici olarak düzenlemek ve ardından tüm diziyi değişkeninize geri atamak olabilir. Çünkü Vue tek tek öğeleri izlemediğinden, tüm değişkenin güncellenmesini izleyecektir.

Yani bu da çalışmalı:

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

Bu, daha sonra DOM'nuzu da güncellemelidir.