多选组件的数据属性不会在更改时更新。复选框不会在前端更新。
预期的行为:单击复选框时,将其打勾。
有人可以帮我吗?
链接到代码:https://jsfiddle.net/bzqd19nt/3/
<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>
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')
当您在javaScript中调用任何函数时,该函数的参数值将被复制到局部变量。这意味着当您在函数内部更改参数时,它不会影响传递了函数参数值的外部变量。
在您的代码中,您调用onSelect
并尝试在函数内部更改此函数的option
参数:
option.checked = true;
这仅影响局部变量option
(函数参数)。并且不影响Vue实例的options
中data
数组中的对象,这些对象与复选框绑定。这就是为什么当您单击列表中的选项时什么也没有发生的原因。
要修复它,请在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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.js"></script>
<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>