결국 하고 싶었던 일

트리 표시하여 선택한 데이터를 반영

공식 트리 샘플

htps // jp. 아 js. 오 rg/v2/에ぁmpぇs/t레에ゔぃ에w. HTML
사용하고 싶지 않아.
확실히 편하지만 아이 부품 손자 부품을 만들면
데이터의 버킷 릴레이가 되기 때문에 Vuex를 사용해야 되지 않을까. . . !
그래서 자식 구성 요소를 만들지 않고 노력했습니다.

해봤어

움직이지 않는다v-for에서 목록 렌더링하는 트리 구조 부분을 클릭해도 열고 닫지 않습니다.
그러나 클릭 이벤트는 데리러 데이터 변경은되고있다
배열이 リアクティブ가 아닙니다. . . .

배열 거동 검증

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index"> {{ item }} </li>
    </ul>
    {{ list }}
    <button @click="incrementArray">+1</button>
  </div>
</template>

<script>
export default {
  name: 'Sample',
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    incrementArray() {
      this.list[0] = this.list[0] + 1;
      console.log(this.list);
    }
  }
}
</script>

아칸, 반영됩니다. . . 뭐야 이거. . .

그러나 콘솔 로그를 보면 값이 증가하고 있기 때문에
원인은 再描画されていない입니다.

조사한 참고가 되는 기사

(공식 문서) 목록 렌더링

(공식 문서) 리액티브 탐구

Vue.js의 data 속성에서 배열 변경을 splice로 바꿔라!

요컨대

push()pop()shift()unshift()splice()sort()reverse()를 사용하면 변경을 감지하고 다시 그립니다! !

보통으로 대입하면 검지하지 않아! !

배열과 객체에서 요소를 늘리거나 줄일 때는 this.$set()를 사용하십시오! ! "

알겠어

수정해 나가기

위 방법 헛되이 달려 강제 발화 패턴

<script>
export default {
  name: 'Sample',
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    incrementArray() {
      this.list[0] = this.list[0] + 1;
      this.list.splice();
    }
  }
}
</script>

오~

겉보기에 좋지 않은 구현이지만
표시하고 있는 배열에 변경은 없지만 다른 변수의 상태가 표시에 영향을 주는 경우는
이렇게 할 수밖에 없을지도 모른다v-for에서 다른 변수를 v-show 또는 v-if에서 참조하는 경우

this.list.push({});
this.list.pop();

토카

this.list.unshift({});
this.list.shift();

나는 시도했다.
강제 발화시킨 경우 splice()가 가장 빠릅니다.

this.$set 을 사용하는 패턴

<script>
export default {
  name: 'Sample',
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    }
  },
  methods: {
    incrementArray() {
      this.$set(this.list, 0, this.list[0] + 1);
    }
  }
}
</script>

표시에 사용하는 데이터에 변경 사항을 직접 추가하는 것이 좋습니다.
나머지는 위의 방법을 사용합니다.

〆

배열과 객체는 특별합니다.

다음 번은 트리 표시한 체크 박스의 녀석의 기사에서도 씁니다
떫지 않고 트리를 아이 컴퍼넌트화해 Vuex 데뷔할까. . .