v-for와 v-if(v-show)의 조합 사용

전재:https://www.jianshu.com/p/3e63f23e9886작가님의 공유에 감사 드립니다!
장면 사용: 목록list를 v-for로 훑어보고 v-if(v-show)를 통해 데이터의 표시/숨김을 제어하려면
이 글은 주로 내가 작성한 구덩이를 기록하고 이 구덩이에 빠진 것이다. 주요 원인은 자신이 Vue 공식 문서를 읽을 때 꼼꼼하지 못했기 때문이다.교훈의 재가 늘 깊어 괴롭다(;;)
본론으로 들어가서 제가 하고 싶은 것은 목록 페이지입니다. 목록의 항목을 클릭하면 이 항목의 구체적인 내용을 표시하거나 숨길 수 있습니다.
정상적인 사고방식, 이런 사소한 html 부분은 이렇게 써야 돼요.

일반적인 사고방식이라면 이벤트를 터치한 후에dom를 조작해야 한다. 예를 들어 jquery의 show () 와hide () 를 사용해야 한다.그러나 vue의 주요 사상은 데이터를 통해 보기를 구동하는 것이다. 따라서 여기서는 Jquery의 해결 방법이 아니라 v-show 명령을 통해 숨겨진 부분의 표시와 숨김을 제어한다.
script 부분 쓰기

import Vue from 'vue'
export default {
  name: 'status',
  data: function () {
    return {
      list: [
        {
          id: 1,
          title: '   ',
          show: false
        },
        {
          id: 2,
          title: '   ',
          show: false
        },
        {
          id: 3,
          title: '   ',
          show: false
        }
      ]
    }
  },
  methods: {
    toggleShow: function (index) {
      this.list[index].show = !this.list[index].show
    }
}

데이터 부분에서 하나의 그룹list를 통해 목록에 표시할 항목을 저장하고, 항목마다 show 속성을 통해 숨겨진 부분의 표시와 숨김을 제어합니다.사고방식에서 이런 문법은 정확하지만 실제로 클릭 이벤트는 작용하지 않는다.나중에 실제 클릭 이벤트가 트리거된 그룹의 속성도 바뀌었지만 보기는 바뀌지 않았다.이 문제에 오랫동안 시달렸지만 실제로 Vue의 공식 문서는 다음과 같이 설명했다.
Vue는 JavaScript의 제한으로 인해 다음과 같은 변경된 배열을 감지할 수 없습니다.
색인을 이용해서 항목을 직접 설정할 때, 예를 들어: vm.items[indexOfItem] = newValue 배열의 길이를 수정할 때, 예를 들어 vm.items.length = newLength 예를 들면 다음과 같습니다.

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' //       
vm.items.length = 2 //       

첫 번째 문제를 해결하기 위해 다음과 같은 두 가지 방식을 모두 실현할 수 있다.items[indexOfItem] = newValue와 같은 효과가 나타나며 상태 업데이트도 트리거됩니다.

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

너도 vm.$사용 가능set 인스턴스 메서드, 글로벌 메서드 Vue.set의 별칭:

vm.$set(vm.items, indexOfItem, newValue)

두 번째 문제를 해결하기 위해 splice를 사용할 수 있습니다:

vm.items.splice(newLength)

보기가 업데이트되지 않은 이유는 Vue에서 그룹의 변경 사항을 감지할 수 없기 때문입니다. 정확한 방법은 vue에서 제공하는 set 방법을 호출하여script 부분을 다시 쓰는 것입니다.

import Vue from 'vue'
export default {
  name: 'status',
  data: function () {
    return {
      list: [
        {
          id: 1,
          title: '   ',
          show: false
        },
        {
          id: 2,
          title: '   ',
          show: false
        },
        {
          id: 3,
          title: '   ',
          show: false
        }
      ]
    }
  },
  created: function () {
  methods: {
    toggleShow: function (index) {
      let newItem = this.list[index]
      newItem.show = !this.list[index].show
      Vue.set(this.list, index, newItem)
      //      vue                    
    }
  }
}