Vue: не работает связывание с v-моделью в компоненте пользовательских флажков - PullRequest
Новая
       45

Vue: не работает связывание с v-моделью в компоненте пользовательских флажков

0 голосов
/ 01 октября 2019

Я пытаюсь создать пользовательский компонент-флажок с параметрами, которые создаются с помощью цикла 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>

1 Ответ

0 голосов
/ 02 октября 2019

Когда вы делаете 

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

, он работает как 

myCheckBoxModel = e.target.value

Так что он просто присваивает значение последнего установленного флажка myCheckBoxModel. Если вы хотите сохранить все отмеченные элементы в myCheckBoxModel, вам нужно сделать следующее:

  1. добавить value свойство к ui-checkbox компоненту, чтобы иметь доступ к текущему значению myCheckBoxModel,Value - это имя свойства по умолчанию для этой цели (см. руководство по vue ).
  2. в вашем методе onChange скопируйте текущее значение в переменную, потому что мутация * 1021 не годится* свойство напрямую
  3. если флажок установлен, поместите соответствующее значение в массив. Если флажок не установлен, удалите соответствующее значение из массива
  4. emit 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

...