以编程方式与vue multiselect交互

Question

尝试使用以下选项打开选择：

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

这个通过直接选择项目来工作，但在我的情况下，元素需要是可见的，所以我无论如何都必须打开抽屉。

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

为了做到这一点，我尝试在整个vue多选节点树中迭代，并向每个元素发送一个点击：

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'

按索引选择/取消选择项目：

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