Vue: 사용자 지정 확인란 구성 요소에서 v-model과의 바인딩이 작동하지 않음

Vue: 사용자 지정 확인란 구성 요소에서 v-model과의 바인딩이 작동하지 않음

옵션과 값이 있는 어레이에서 v-for 루프를 사용하여 생성된 옵션을 사용하여 사용자 지정 확인란 구성 요소를 생성하려고 함.v-모델을 확인란 구성 요소에 올바르게 바인딩하여 올바르게 업데이트하려면 어떻게 해야 하는가?

현재 문제는 모델이 선택되어 있는 최신 확인란에만 업데이트되고 모든 선택된 옵션이 있는 배열을 제공하지 않는다는 것이다.

Vue.component('ui-checkbox', {
	 props: {   
    label: {
      type: String,
      required: true,
    },
    index: {
      type: Number
    },
    inputValue: {
      type: String
    }
  },
  methods: {
    onChange(e) {
      this.$emit('input', e.target.value);
    },
  },
	template: `<div>
    <input 
      :id="index"
      type="checkbox"
      :value="inputValue"
      @change="onChange" />
    <label :for="index">
      {{ label }}
    </label>
  </div>`,
})

new Vue({
  el: "#app",
  data: {
    checkOptions: [
      {
        label: 'Option 1',
        value: 'value of option 1',
      },
      {
        label: 'Option 2',
        value: 'value of option 2',
      },
      {
        label: 'Option 3',
        value: 'value of option 3',
      },
      {
        label: 'Option 4',
        value: 'value of option 4',
      },
    ],
    myCheckBoxModel: []
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <span>checked Checkboxes: {{ myCheckBoxModel }} </span>
   <ui-checkbox
     v-for="(option, index) in checkOptions"
     v-model="myCheckBoxModel"
     :key="index"
     :index="index"
     :input-value="option.value"
     :label="option.label" />    
</div>

할 때

this.$emit('input', e.target.value);

처럼 작동한다.

myCheckBoxModel = e.target.value

마지막으로 클릭한 확인란 값을 할당하는 겁니다.myCheckBoxModel. 체크된 모든 항목을 보관하려면myCheckBoxModel, 다음을 수행해야 한다.

1. 덧셈을value의 소유물.ui-checkbox현재 값에 액세스할 수 있는 구성 요소myCheckBoxModel.Value이 목표에 대한 기본 속성 이름(vue 가이드 참조).
2. 당신 안에onChangemethod는 변수에 현재 값을 복사한다. 변이하는 것은 좋지 않기 때문이다.value직접 재산
3. 확인란이 선택되어 있으면 통신원 값을 배열로 푸시하십시오.확인란을 선택하지 않은 경우 어레이에서 통신원 값으로 삭제
4. 발산시키다input결과 배열을 값으로 하는 이벤트

Vue.component('ui-checkbox', {
    	 props: {   
        label: {
          type: String,
          required: true,
        },
        index: {
          type: Number
        },
        inputValue: {
          type: String
        },
        value: {
          type: Array
        }
      },
      methods: {
        onChange(e) {
          let currentValue = [...this.value]
          if (e.target.checked) {
            currentValue.push(e.target.value) 
          } else {
            currentValue = currentValue.filter(item => item !== e.target.value)
          }
          this.$emit('input', currentValue);
        },
      },
    	template: `<div>
        <input 
          :id="index"
          type="checkbox"
          :value="inputValue"
          @change="onChange" />
        <label :for="index">
          {{ label }}
        </label>
      </div>`,
    })

    new Vue({
      el: "#app",
      data: {
        checkOptions: [
          {
            label: 'Option 1',
            value: 'value of option 1',
          },
          {
            label: 'Option 2',
            value: 'value of option 2',
          },
          {
            label: 'Option 3',
            value: 'value of option 3',
          },
          {
            label: 'Option 4',
            value: 'value of option 4',
          },
        ],
       myCheckBoxModel: []
      }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div id="app">
  checked Checkboxes:
       <span v-for="item in myCheckBoxModel"> {{ item }}; </span>
       <ui-checkbox
         v-for="(option, index) in checkOptions"
         v-model="myCheckBoxModel"
         :key="index"
         :index="index"
         :input-value="option.value"
         :label="option.label" />    
  </div>

프로그램적으로, 즉 언제 변경하는지 확인란 상태를 설정할 필요가 있는지 모르겠다.myCheckBoxModel확인란 상태가 그에 따라 변한다.만약 그렇다면, 너는 봐야 한다.value당신의 소유물.ui-checkbox구성 요소: 확인란의 값이 다음 위치에 있는지 여부에 따라 확인란의 상태 설정value배열. 동일한 작업을 수행함created다음에 따라 확인란 상태를 초기화하려면 후크myChexkboxModel

@Lana가 제시한 해결책은 단지 너무 복잡하다.그onChange방법은 전혀 필요하지 않다 - 당신이 원하는 것은 빌트인 파워를 사용하는 것이다.v-model아래 참조...

Vue.component('ui-checkbox', {
  props: {
    label: {
      type: String,
      required: true,
    },
    index: {
      type: Number
    },
    inputValue: {
      type: String
    },
    value: {
      type: Array
    }
  },
  computed: {
    model: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    },
  },
  template: `<div>
        <input 
          :id="index"
          type="checkbox"
          :value="inputValue"
          v-model="model" />
        <label :for="index">
          {{ label }}
        </label>
      </div>`,
})

new Vue({
  el: "#app",
  data: {
    checkOptions: [{
        label: 'Option 1',
        value: 'value of option 1',
      },
      {
        label: 'Option 2',
        value: 'value of option 2',
      },
      {
        label: 'Option 3',
        value: 'value of option 3',
      },
      {
        label: 'Option 4',
        value: 'value of option 4',
      },
    ],
    myCheckBoxModel: []
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  model: {{ myCheckBoxModel }}
  <ui-checkbox v-for="(option, index) in checkOptions" v-model="myCheckBoxModel" :key="index" :index="index" :input-value="option.value" :label="option.label" />
</div>

참조URL: https://stackoverflow.com/questions/58187290/vue-binding-with-v-model-in-custom-checkbox-component-doesnt-work