使用Vue.js实现多选框组件
Vue.component('multi-select', {
props: {
options: {
type: Array,
required: true
},
value: {
type: Array
}
},
data() {
return {
selected: this.value || []
}
},
methods: {
select(option) {
const index = this.selected.indexOf(option);
if (index === -1) {
this.selected.push(option);
} else {
this.selected.splice(index, 1);
}
this.$emit('input', this.selected);
}
},
render() {
const options = this.options.map(option => {
return this.select(option)}>{option}
{this.selected.indexOf(option) !== -1 ? '✔' : ''}
});
return{options}
}
});
new Vue({
el: '#app',
data() {
return {
selectedOptions: []
}
}
});