Vuejs 및 Vue.set (), 배열 업데이트

Vuejs 및 Vue.set (), 배열 업데이트

---

저는 Vuejs를 처음 사용합니다. 무언가를 만들었지 만 그것이 간단하고 올바른 방법인지 모르겠습니다.

내가 원하는 것

배열의 날짜를 원하고 이벤트에서 업데이트합니다. 먼저 Vue.set을 시도했지만 작동하지 않습니다. 이제 내 배열 항목을 변경 한 후 :

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

배열에 아무 것도 push ()하면 업데이트됩니다.하지만 때로는 마지막 항목이 숨겨집니다. 어쩐지 ...이 솔루션이 약간 엉망이라고 생각합니다. 어떻게하면 안정적으로 만들 수 있습니까?

간단한 코드는 다음과 같습니다.

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가 상태 변경 사항을 가져올 수 없습니다.

Common Beginner Gotchas 에서 설명한대로 push, splice 등과 같은 배열 메서드를 사용해야하며 이와 같은 인덱스 a[2] = 2나 배열의 .length 속성을 수정 하지 않아야합니다.

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>

---

2 편집

• 의 경우 모든 개체가 필요 반응성 사용 변경Vue.set(object, prop, value)
• For array mutations, you can look at the currently supported list here

---

EDIT 1

For vuex you will want to do Vue.set(state.object, key, value)

---

Original

So just for others who come to this question. It appears at some point in Vue 2.* they removed this.items.$set(index, val) in favor of this.$set(this.items, index, val).

Splice is still available and here is a link to array mutation methods available in vue link.

참고URL : https://stackoverflow.com/questions/42807888/vuejs-and-vue-set-update-array