Vue.js에 활성화된 속성 동적 추가

Vue.js의 양방향 귀속

Vue.js에서 v-model 를 사용하여 양방향 귀속을 실현할 수 있습니다.
예를 들어 세 가지 옵션을 고려한 복선상자.이 예는 Vue입니다.js의 단일 구성 요소로 원본을 기술합니다.

v-model의 양방향 귀속 사용하기

input 레이블 3개 쓰기

script의data()에서 각input의 상태에 대응하는 속성을 정의

input 태그에 속성v-model을 추가하여 해당 속성

을 설명합니다.
sample.vue

<template>
  <ul>
    <li>
      <input type="checkbox" v-model="option1" />
      <label>選択肢1</label>
    </li>
    <li>
      <input type="checkbox" v-model="option2" />
      <label>選択肢2</label>
    </li>
    <li>
      <input type="checkbox" v-model="option3" />
      <label>選択肢3</label>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      option1: false,
      option2: false,
      option3: false
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

많은 선택 문제 & 여러 UI 요소를 하나의 속성에 대응시키려는 문제

상기 예에서 보듯이 선택항이 3가지라면 각 선택항에 대응하는 속성v-model을 정의하여 대응하면 충분하다.
그렇다면 100개의 선택 항목이 있는 경우는 어떨까.100개의 속성을 미리 정의하는 것은 불가능한 것이 아니지만, 쓰다 보면 어리석어진다.규격에 따라 아마 100개 중 몇 개만이 실제로 사용되었을 것이다.
사용자가 터치한 확인란 상태를 관리해야 합니다.
또한 체크 상자를 만들 때 전체 줄을 삭제하려고 할 수도 있습니다.이때 문제가 발생한 것은 다음과 같다.
- ul 또는 label 컴포넌트 등은 지정할 수 없음v-model- 하나의 속성에 대해 두 개의 트리거가 있습니다(체크 상자 자체에서 탭을 클릭하고 클릭).
기본 방침으로 다음과 같은 생각을 할 수 있다.

복선상자에 대응하는 속성을 하나하나 정의하는 것을 정지

준비checked 이러한 대상은 checked에 사용자가 만진 복선상자에 대응하는 속성을 추가

v-on:click와 같은 활동 트리거를 사용하여'사용자가 만졌는지'

를 판정한다.

v-on:click 특정 속성에 해당하는 UI 요소 지정

방침이 결정되더라도 실천해야 한다.

동적 활동 속성 추가(실패 예)

이것은 내가 반한 예다.
나는 단순히 복선상자selected[option] = true를 클릭하면 된다고 생각한다.

input와 label에 클릭 이벤트를 추가

클릭 시 selected 객체에 option1 등의 요소를 추가하여 선택 여부를 판단하는 데 사용

sample.vue

<template>
  <ul>
    <li>
      <input
        type="checkbox"
        v-model="selected.option1"
        v-on:click="select('option1')" />
      <label
        v-on:click="select('option1')">
        選択肢1
      </label>
    </li>
    <li>
      <input
        type="checkbox"
        v-model="selected.option2"
        v-on:click="select('option2')" />
      <label
        v-on:click="select('option2')">
        選択肢2
      </label>
    </li>
    <li>
      <input
        type="checkbox"
        v-model="selected.option3"
        v-on:click="select('option3')" />
      <label
        v-on:click="select('option3')">
        選択肢3
      </label>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      selected: {}
    }
  },
  methods: {
    select (option) {
      console.log(option)
      if (!this.selected[option]) {
        this.selected[option] = true
      } else {
        this.selected[option] = !this.selected[option]
      }
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

주안점

이벤트를 눌렀을 때 이동하는 것은 아래 코드입니다.아무래도 좋아 보이네.

if (!this.selected[option]) {
  this.selected[option] = true
} else {
  this.selected[option] = !this.selected[option]
}

결실

라벨을 클릭할 수 있습니다!단, 복선상자가 없습니다...

체크 상자를 눌렀을 때 상태 변화를 확인하세요!

어?그러나 속성에 옵션의 값을 추가하지 않습니다...

왜 안 풀리지?

조사해 보니 문서는 아래와 같다.
"현대 자바스크립트의 제한(Object.observe의 포기)Vuejs에서 속성을 추가하거나 삭제할 수 없습니다.Vue.인스턴스를 초기화하는 동안 Getter/setter 변환 처리를 수행하려면 Vue를 변환하고 다시 활성화하기 위해 속성이 데이터 대상에 존재해야 합니다."
"에?이렇게 생각하면서 계속 읽으면...
Vue는 생성된 인스턴스에 대해 새 루트 레벨의 활성화 속성을 동적으로 추가할 수 없습니다.하지만 Vue.set(object,key,value) 방법을 사용하여 플러그인 대상에 재활성 속성을 추가할 수 있습니다
이런 견해가 있다.활동 객체를 동적으로 추가하려면 Vue.set을 사용해야 합니다.

동적 활동 속성 추가(좋은 예)

츤데레 문서에서 구원Vue.set을 받았다.this.selected[option] = true의 부분을 개작해 보세요.단일 파일 구성 요소인 경우 this.$set에서 호출할 수 있습니다.
sample.vue

<template>
  <ul>
    <li>
      <input
        type="checkbox"
        v-model="selected.option1"
        v-on:click="select('option1')" />
      <label
        v-on:click="select('option1')">
        選択肢1
      </label>
    </li>
    <li>
      <input
        type="checkbox"
        v-model="selected.option2"
        v-on:click="select('option2')" />
      <label
        v-on:click="select('option2')">
        選択肢2
      </label>
    </li>
    <li>
      <input
        type="checkbox"
        v-model="selected.option3"
        v-on:click="select('option3')" />
      <label
        v-on:click="select('option3')">
        選択肢3
      </label>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      selected: {}
    }
  },
  methods: {
    select (option) {
      console.log(option)
      if (!this.selected[option]) {
        this.$set(this.selected, option, true)
      } else {
        this.selected[option] = !this.selected[option]
      }
    }
  }
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

결실

순조롭게 진행되었습니다!

참고 자료

복선상자 등에 대한 귀속괜찮은 문서인 것 같아요.이 있습니다.label 태그에 for 속성을 추가하면 이번처럼 번거롭지 않겠나.
하지만 생각은 어딘가에 작용할 거야...!