Vuejs 및 Vue.set(), 어레이 업데이트

Vuejs 및 Vue.set(), 어레이 업데이트

저는 Vuejs에 처음 왔어요.뭔가를 만들긴 했지만 그게 간단한 방법인지 모르겠네요

내가 원하는 것

배열된 날짜를 보고 이벤트로 업데이트하고 싶습니다.처음에 Vue.set을 시도했지만 잘 되지 않았다.어레이 항목을 변경한 후:

this.items[index] = val;
this.items.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>

편집 2

• 반응성이 필요한 모든 객체 변경에 대해Vue.set(object, prop, value)
• 어레이 돌연변이의 경우 현재 지원되는 목록을 여기에서 확인할 수 있습니다.

---

편집 1

vuex의 경우Vue.set(state.object, key, value)

---

원래의

그래서 이 질문을 하는 다른 사람들에게만요.삭제한 Vue 2의 어느 시점에서 표시됩니다.*this.items.$set(index, val)에 찬성하여this.$set(this.items, index, val).

스플라이스를 계속 사용할 수 있으며 vue 링크에서 사용할 수 있는 어레이 변환 방법에 대한 링크가 여기에 있습니다.

이렇게 어레이를 조작하면 VueJ가 상태 변경을 픽업할 수 없습니다.

공통 초보자 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>

앞서 설명한 바와 같이 VueJ는 이러한 작업을 추적할 수 없습니다(어레이 요소 할당).어레이가 있는 VueJ에 의해 추적되는 모든 작업이 여기에 있습니다.다시 한 번 복사해 보겠습니다.

• 푸시()
• 팝()
• 시프트()
• unshift()
• 스플라이스()
• 정렬()
• 리버스()

개발 중에, 어떻게 그것을 감수할 것인가 하는 문제에 직면하게 됩니다. :)

push(), pop(), shift(), unshift(), sort() 및 reverse()는 매우 단순하고 경우에 따라 도움이 되지만 주요 초점은 스플라이스() 내에 있기 때문에 VueJs에 의해 추적되는 어레이를 효과적으로 변경할 수 있습니다.어레이에서 가장 많이 사용되는 몇 가지 접근 방식을 공유할 수 있습니다.

어레이 내의 아이템을 교환해야 합니다.

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

주의: 항목 필드를 수정해야 하는 경우 다음 방법으로 변경할 수 있습니다.

this.values[index].itemField = newItemFieldValue

항목(오브젝트) 필드가 추적되는 것처럼 VueJ에 의해 추적됩니다.

어레이를 비워야 합니다.

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

실제로 이 함수 splice() - w3schools 링크로 더 많은 작업을 수행할 수 있습니다.여러 레코드를 추가하거나 여러 레코드를 삭제할 수 있습니다.

Vue.set() 및 Vue.delete()

Vue.set() 및 Vue.delete()는 UI 버전의 데이터에 필드를 추가하는 데 사용할 수 있습니다.예를 들어 개체 내에 계산된 데이터나 플래그가 추가로 필요합니다.오브젝트 또는 오브젝트 목록(루프 내)에 대해 다음 작업을 수행할 수 있습니다.

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

그리고 Axios가 호출하기 전에 동일한 형식으로 편집된 데이터를 백엔드로 다시 전송합니다.

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

다른 방법으로는 어레이를 일시적으로 편집한 후 어레이 전체를 변수에 다시 할당하는 방법이 있습니다.Vue는 개별 항목을 감시하지 않기 때문에 변수 전체가 갱신되는 것을 감시합니다.

따라서 이 작업도 함께 수행되어야 합니다.

var tempArray[];

tempArray = this.items;

tempArray[targetPosition]  = value;

this.items = tempArray;

이것에 의해서, DOM 도 갱신됩니다.

오브젝트 및 어레이의 반응성을 확인합니다.

https://vuejs.org/v2/guide/reactivity.html

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