vue.js - 在vuejs组件的多选中获取选定的项目
问题描述
在我的组件中,我有多重选择,应该在传递的匹配值上选择选项:
<select class="custom-select" multiple="" v-model="items">
<option v-for="item in objects_list" :selected="itemSelected(item)" :key="item.id" :value="item.id">
{{item.name}}
</option>
</select>
...
methods() {
itemSelected(item) {
let selected;
let object_selected = this.value.filter(object => {
console.log(object)
if(item.id == object) {
return true;
}
});
}
选定的绑定似乎不起作用,如何正确实现多选以绑定选定的选项?
解决方案
最好的方法是使用 Vue.js 中的 CREATED 函数
<template>
<div>
<select class="ur-CSS-class" multiple v-model="selected">
<option v-for="item in objects_list" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
<br />
<span>Selected : {{ selected }}</span>
</div>
</template>
<script>
var your_list = [
{ name: "one", id: 13 },
{ name: "two", id: 18 },
{ name: "three", id: 11 },
{ name: "four", id: 7 },
{ name: "five", id: 1 },
{ name: "six", id: 2 },
];
export default {
name: "App",
data() {
return {
objects_list: your_list,
selected: []
};
},
props:{
inputData: {
type: Object,
required: true
}
},
computed: {
selected() {
let selected = this.objects_list.filter(item => {
return this.inputData.find(i => i == item.id);
});
return selected;
}
}
};
</script>
推荐阅读
- jenkins - 如何从 git repo 中仅签出特定文件夹并构建
- java - HPE UFT 干扰计算机中的 java 配置
- c# - Linq 列表列表到一个列表
- php - Eventbrite API - 可能有多个扩展?
- ruby-on-rails - 使用 ruby Outlook 创建日历事件
- html - css 选择器第一次和最后一次出现
- asp.net - 在高级环境中设置 Cookie 在 Internet Explorer 中不起作用
- ios - 更新 AppStore 连接构建版本
- ruby - RSpec Mock - 类不实现实例方法:jql。也许您打算使用 `class_double` 代替?
- javascript - $(...).cells 在 jQuery 中未定义