问题标签 [v-autocomplete]

不知何故，我无法在测试期间看到html 内部items的v-autocomplete内容，并且设置项目也不起作用。v-autocomplete在（正在加载安装上的项目）和测试下方。

测试看起来像这样：

测试expect(getByText(wrapper.element, item.name)).toBeTruthy();将失败并显示消息Unable to find an element with the text。打印 htmlconsole.log(wrapper.html())也不会显示v-autocomplete. 所以我的问题是：

1. 如果物品已加载，我该如何测试？
2. 如何将加载的一项设置为 的选定项v-autocomplete？

我正在尝试将一些数据从父级带到模态，其中有 2 个输入，一个是 v-autocomplete，但它没有显示所选数据。

正如您所看到的，有一个来自函数 getDepartamentos 的数据，它也来自一个对象类别：{id: 1, nome: "Arroz", id_departamento: 3 }来自父级，但在我的 v-autocomplete 上没有选择它。我的类别中的 id_departamento 是 3，而 departamentos 具有相关的 ID 和应该显示的名称。

此数据来自类别列表，我想显示它以进行编辑和显示。

这是代码：

我有一个带有v-autocomplete. 它有select和的观察者search：

我正在测试它如下。我希望两个观察者都应该开火。事实上，只有select观察者被解雇了。search观察者没有。

Search有什么通过考试的想法吗？

为什么当我单击任何地方时f*** 是 vuetifyv-select或不关闭？v-autocomplete

更糟糕的是，没有任何关于它的文档。这只是纯粹的烦人，真的需要时间来弄清楚。

遇到同样问题的人可以帮助我吗？

编辑： 我现在发现有人有同样的问题 https://codepen.io/kaps-pavel/pen/qBdRrwX?editors=1010

但是对于这个问题没有任何解决方案。

在下面的代码中，我使用了一个 v-autocomplete 组件和一个select存储所选值的变量。记录的watch值和类型select。我面临的问题是，当清除 v-autocomplete 中键入的文本时，select默认为 null 而不是空字符串。有没有办法恢复select为空字符串而不是空对象？

While writing a E2E test for a Vuetify page using Cypress, I ran into difficulties selecting one or more elements from either a <v-select> or a <v-autocomplete>

The answer to a preexisting question works okay as long as there are only a few options on the select.

The problem is: if your component has many options selected, Vuetify will only render the options that are close to the corresponding scrollbar position on its popup, meaning that the option you need to select may not be visible and is therefore, not selectable via Cypress.

Does anyone know a reliable way to access an element on a Vuetify <v-select>/<v-autocomplete> even if the select has too many options?

Image Link我从 axios api 收到 100-200 个结果。我只想显示其中的前 10 个。有什么办法我可以做到这一点。我不能从 api 做到这一点，因为我还想显示从 axios 返回的总项目数。

编辑：我有一个显示所有按钮，它显示新弹出窗口中所有项目的列表。因此，我想要返回的总项目的确切计数，但只想显示其中的前 10 个结果。

如果至少选择了一项，我如何更改 v-autocomplete 的样式（边框颜色）？如果焦点在字段上，现在样式会更改（蓝色），但如果选择项目并且焦点不在字段上，则变为默认（灰色）。移除焦点后我需要保持蓝色边框我尝试更改 css 但没有成功

Edit2: I found out the answer to this, you might also miss this one out if you're just starting on vuetify, or that you just directly dive into it and integrate it into an existing project without reading its documentation like me . Vuetify won't work if it's not inside the application tag or <v-app> tag. So make sure if you're using a layout, that you wrap your code inside the v-app tag, the stylings may apply, but the functionalities won't work if you did not wrap using the application tag.

Original Question:

I can't seem to be able to make the the v-autocomplete work in any of my project, I tried it in 2 different projects, one installed using npm, and the other installed using the nuxt-create. I even copied the code from their demo on their website, but that didn't work too. These are the package version for each project:

and

I can see the v-menu and the list in my array when I inspect element but it has a default style of display: none;, and because of that, even if I clicked or start typing, the array of supposed autocompletes wouldn't show.

So my question would be, how do I make it to work like how it's supposed to work in the demo on their website?

Edit1: I found out a little quirk about this, It would now work, but only on pages with default layout. So when I set a custom layout, like this one, layout: 'sidebar-layout', on the /device page, the v-autocomplete's dropdown would never open, unless I set the div class v-menu using element inspector in my browser. I haven't yet found out what's causing this, could either be in the layout or the component called into it.

当 vuetify.js 过滤器中的 v-autocomplete 显示“无可用数据”时，有什么方法可以捕获事件？我在这里找不到这个事件https://vuetifyjs.com/en/api/v-autocomplete/#events 也许蜜蜂有一些解决方法？蜜蜂我可以得到过滤结果并检查它是否为NULL？