vue2中 我的一个组件为 <el-select v-model="queueName50" placeholder="队列选择(50)(为空则全选)" multiple filterable allow-create clearable style="width: 300px; margin: 10px"> <el-option v-for="item in queueNameList[server50]" :key="item.nameWithIp" :label="item.label" :value="item.name"> </el-option> </el-select> 请注意这是个可多选的选择框,queueName50是一个列表,现在组件的功能为将选中的item.name,放入queueName50中,我的需求是要选择后将item中的两个属性组成一个新对象放入queueName50中,请注意这时queueName50仍是列表,里面有多个对象,这应该怎么实现
时间: 2024-02-10 10:12:09 浏览: 65
vue-select-image:ue Vue 2.x组件,用于从列表中选择图像
您可以使用`computed`属性来监听`queueName50`的变化,然后将每个选中的`item`包装成一个新的对象,最后将所有新的对象存储在`queueName50`中。具体代码如下:
```html
<el-select v-model="queueName50" placeholder="队列选择(50)(为空则全选)" multiple filterable allow-create clearable style="width: 300px; margin: 10px">
<el-option v-for="item in queueNameList[server50]" :key="item.nameWithIp" :label="item.label" :value="item"></el-option>
</el-select>
```
```javascript
computed: {
newQueueName50() {
return this.queueName50.map(item => ({
name: item.name,
label: item.label
}));
}
}
```
这里将`queueName50`的每个选中的`item`包装成了一个新对象,包含了`name`和`label`两个属性。`newQueueName50`是一个计算属性,会随着`queueName50`的变化而更新。
阅读全文