Vue 계산 세터가 확인란과 함께 작동하지 않습니까?

Vue 계산 세터가 확인란과 함께 작동하지 않습니까?

계산 세터가 있습니다.

rating: {
    get() {
        return this.$store.state.rating;
    },

    set(value) {
        console.log(value);

        this.$store.commit('updateFilter', {
            name: this.name,
            value
        });
    }
}

이것은 다음과 같이 내 등급에 링크됩니다.

<label>
    <input type="checkbox" :value="Number(value)" v-model="rating">
    {{ index }}
</label>

워처를 사용하여 레이팅 모델의 변경을 감시하면 어레이가 표시되므로 계산 세터가 어레이를 기록할 것으로 예상됩니다.

위와 같은 계산 세터를 사용할 때마다 단순히 출력만 하면 됩니다.true체크박스를 켜거나false모두 선택 해제된 경우.

이게 무슨 일이야? 워처처럼 어레이를 가져와야 하는 거야?

v-model에는, 특히 체크 박스에 적용되고 있는 경우는, 다소 「불규칙」한 동작이 있습니다.어레이에 바인드하면 체크박스는 선택한 상태에 따라 어레이에 값을 추가하거나 어레이에서 값을 제거합니다.

이 예에서는 무엇을 나타내는지는 명확하지 않습니다.value인Number(value)이 체크박스를 켜면 배열에 포함할 값이어야 합니다.

위에 링크된 Vue 문서에서 예를 들어 계산 결과를 사용하도록 수정했습니다.이 예에서는 예상대로 동작합니다.set어레이의 새로운 값을 가져옵니다.

new Vue({
  el: '#app',
  data: {
    checkedNames: []
  },
  computed: {
    proxyCheckedNames: {
      get() {
        return this.checkedNames;
      },
      set(newValue) {
        this.checkedNames = newValue;
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <input type="checkbox" id="jack" value="Jack" v-model="proxyCheckedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="proxyCheckedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="proxyCheckedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

언급URL : https://stackoverflow.com/questions/44950565/vue-computed-setter-not-working-with-checkboxes