使用Vue-Multiselect库并启用多项选择,是否可以重新选择所选项目?假设有两个选项产品1和产品2:
options: [
{ name: 'Product 1', value: 'product_1' },
{ name: 'Product 2', value: 'product_2' }
]
然后,我将多次选择“产品1”,结果将为:
[
{
"name": "Product 1",
"value": "product_1"
},
{
"name": "Product 1",
"value": "product_1"
}
]
它将类似于:
如何实现这种行为?
PS我愿意使用其他Vue 3选择库与多个项目和复制选定的项目。
3条答案
按热度按时间0s0u357o1#
正如@mamdasan所说,要达到这个要求,您可以监听
@input
事件,该事件在v-model
值更改后发出。要获得重复的选定选项,您可以维护一个单独的数组,并在监听@input
事件时清空v-model变量。注**:我在处理此要求时面临的一个挑战是将选择的筹码显示为
v-model
值为空。演示:**
第一个
wpx232ag2#
首先监听多选v-model上的更改,每次更改时,将所选项添加到数组中并清空多选v-model对象。
然后将此插槽添加到多选:
基本上你创建一个数组,每次用户点击多选,你添加到你的数组,并再次清空选择值,然后向用户显示选择的项目
xxb16uws3#