Vue-MultiSelect Checkbox привязка - PullRequest
Новая
       39

Vue-MultiSelect Checkbox привязка

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

Свойства данных компонента множественного выбора не обновляются при изменении. Флажки не обновляются в интерфейсе.

Ожидаемое поведение: флажки должны быть отмечены при нажатии.

Ссылка на код: https://jsfiddle.net/bzqd19nt/3/

<code><div id="app">
  <multiselect 
    select-Label=""
    selected-Label=""
    deselect-Label=""
    v-model="value" 
    :options="options"
    :multiple="true"
    track-by="library"
    :custom-label="customLabel"
    :close-on-select="false"
    @select=onSelect($event)
    @remove=onRemove($event)
    >
    <span class="checkbox-label" slot="option" slot-scope="scope" @click.self="select(scope.option)">
    {{ scope.option.library }}
      <input class="test" type="checkbox" v-model="scope.option.checked" @focus.prevent/>

    </span>
  </multiselect>
  <pre>{{ value }}
new Vue({
  components: {
    Multiselect: window.VueMultiselect.default
  },
  data: {
    value: [],
    options: [
      { language: 'JavaScript', library: 'Vue.js', checked: false },
      { language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
      { language: 'JavaScript', library: 'Vuelidate', checked: false }
    ]
  },
  methods: {
    customLabel(option) {
      return `${option.library} - ${option.language}`;
    },
    onSelect(option) {
      console.log('Added');
      option.checked = true;
      console.log(`${option.library}  Clicked!! ${option.checked}`);
    },

    onRemove(option) {
      console.log('Removed');
      option.checked = false;
      console.log(`${option.library}  Removed!! ${option.checked}`);
    }
  }
}).$mount('#app');

1 Ответ

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

В вашем коде вы вызываете onSelect и пытаетесь изменить аргумент option этой функции внутри функции: 

option.checked = true;

Это влияет только на локальную переменную option (аргумент функции),И не влияет на объекты в массиве options в data экземпляра Vue, объекты, связанные с флажками. Вот почему ничего не происходит, когда вы нажимаете на опцию в списке.

Чтобы исправить это, найдите соответствующий элемент в массиве options и измените его: 

let index = this.options.findIndex(item => item.library==option.library);
this.options[index].checked = true;

Вот фрагмент кодас исправлением: 

new Vue({
	components: {
  	Multiselect: window.VueMultiselect.default
	},
	data: {
  	value: [],
  	options: [
    	{	language: 'JavaScript', library: 'Vue.js', checked: false },
      { language: 'JavaScript', library: 'Vue-Multiselect', checked: false },
      { language: 'JavaScript', library: 'Vuelidate', checked: false }
    ]
	},
  methods: {
  	customLabel (option) {
      return `${option.library} - ${option.language}`
    },
    onSelect (option) {
    	console.log("Added");
      let index = this.options.findIndex(item => item.library==option.library);
      this.options[index].checked = true;
      console.log(option.library + "  Clicked!! " + option.checked);
    },
    
    onRemove (option) {
    	console.log("Removed");
      let index = this.options.findIndex(item => item.library==option.library);
      this.options[index].checked = false;
      console.log(option.library + "  Removed!! " + option.checked);
    }
  }
}).$mount('#app')
* {
  font-family: 'Lato', 'Avenir', sans-serif;
}

.checkbox-label {
  display: block;
}

.test {
  position: absolute;
  right: 1vw;
}




  
    
    {{ scope.option.library }}
      
      
    
  
  {{ value }}
...