vuejs v-model, 다중 확인란 및 계산된 속성

vuejs v-model, 다중 확인란 및 계산된 속성

단일 파일 구성 요소에서 여러 개의 확인란을 사용하려고 합니다.속성을 계산해야 하는데 setter에 배열이 아닌 boolean newVal이 있습니다.코드는 다음과 같습니다.

var demo = new Vue({
    el: '#demo',
    data: {
        _checkedNames: [] 
    },
    computed: {
      checkedNames: {
        get: function () {
          return this._checkedNames;
        },
        set: function (newVal) {
          console.log(newVal); //with computed we have true/false value instead of array
          this._checkedNames = newVal;
        }
      }
    }
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

따라서 콘솔에 부울 값이 표시됩니다.

업데이트 1사례 상세 설명

vue 컴포넌트에 파라미터로 전달되는 모델의 레거시 코드를 사용하고 있습니다.그리고 모델 속성에 컴포넌트 마크업을 바인드해야 합니다._checkedNames이 모델 속성을 시뮬레이트합니다).이 속성은 getter/setter(경우에 따라 getter)를 통해 선언되었습니다.그리고 나는 그러한 속성을 사용하고 싶다.v-model구축.이 사건은 나한테는 통하지 않는다.Vuejs가 제대로 포장 못하나 봐요.또, 전술한 제한을 고려한 솔루션(또는 회피책)을 찾고 있습니다.

다음은 vue 포럼에서 같은 질문을 드리겠습니다.https://forum.vuejs.org/t/v-model-multiple-checkbox-and-computed-property/6544

로 시작하는 속성_또는$는 Vue의 내부 속성 및 API 메서드와 충돌할 수 있으므로 Vue 인스턴스에서 프록시되지 않습니다.다음 방법으로 액세스해야 합니다.vm.$data._property.

공식 문서로부터.

동작하는 버전은 다음과 같습니다.

var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  }
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

계산된 속성을 사용하려면 다음과 같이 사용할 수 있습니다.

var demo = new Vue({
  el: '#demo',
  data: {
    checkedNames: []
  },
  computed : {
    checkedComputed () {
      return this.checkedNames
    }
  }
})

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="demo">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked Names :</span>
  <span>{{ checkedComputed }}</span>
</div>

언급URL : https://stackoverflow.com/questions/42248888/vuejs-v-model-multiple-checkbox-and-computed-property