小编Man*_*avi的帖子

Vue-MultiSelect 复选框绑定

多选组件的数据属性不会在更改时更新。复选框不会在前端更新。

预期行为:单击复选框时应勾选。

代码链接:https : //jsfiddle.net/bzqd19nt/3/

<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 }}</pre>
</div>
Run Code Online (Sandbox Code Playgroud)
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: …
Run Code Online (Sandbox Code Playgroud)

checkbox multi-select vue.js vue-multiselect

3
推荐指数
1
解决办法
8446
查看次数

标签 统计

checkbox ×1

multi-select ×1

vue-multiselect ×1

vue.js ×1