以编程方式与 vue-multiselect 交互

Question

试图用这些打开 select：

document.querySelector('.multiselect').click()
document.querySelector('.multiselect__tags').click()
document.querySelector('#languages').click()
document.querySelector('.multiselect__spinner').click()
document.querySelector('.multiselect__content-wrapper').click()

这个可以 直接 select 编辑项目，但在我的例子中，元素需要可见，所以无论如何我都必须打开抽屉。

document.querySelectorAll('.multiselect__option')[1].click()

为了做到这一点，我尝试遍历整个 vue-multiselect 节点树并向每个元素发送点击：

items = items.querySelector('#languages-input')
items = items.querySelectorAll('*')

const timer = ms => new Promise(res => setTimeout(res, ms))

for(i = 0; i < items.length; i++) {
    console.log(items[i])
    items[i].click()
    await timer(1000)
}

Answer 1

使用 display: none 隐藏抽屉。

为了打开抽屉：

drawer = document.querySelector('.multiselect__content-wrapper')
drawer.style.display = 'block'

按索引到 select/deselect 项：

document.querySelectorAll('.multiselect__option')[0].click()

以编程方式与 vue-multiselect 交互

Interact with vue-multiselect programmatically

vue.js

nuxt.js

vue-multiselect