重写后的标题为：在 Vue 的样式作用域中，Vuetify 中的 ::v-deep .v-autocomplete__content.v-menu__content 不起作用

Question

我有一个 v-autocomplete (vuetify)，可以扩展项目列表

当我单击自动完成以键入项目列表中可用的内容时，项目所在的容器不在我想要的位置，如下图所示（我使用了以下示例） vuetify 自己的菜单，因为它可以添加我遇到问题的系统的图像）

通过选择 devTools 的 .v-autocomplete__content.v-menu__content 类，我可以根据需要定位自动完成，例如通过在其上应用 margin-left 。

当我尝试在范围样式内传递 v-autocomplete__content 类时，我的问题开始发生，因为我只想在此页面上添加此样式。 我尝试过使用 ::v-deep 甚至 >>> ，因为它已经在该页面上的其他一些样式中使用，但它不起作用。

下面也是使用 devTools 选择的字段的图片，以便更好地理解。 我真正的问题只是尝试在范围内的样式中使用样式，是否有人有任何提示或其他替代方案来按照我想要的方式进行编辑？我正在使用 Vuejs。

欢迎任何帮助:)

::v-deep .v-autocomplete__content { border: 2px solid red !important; }

我已经尝试过使用 ::v-deep 和 >>> 模式，甚至在没有 ::v-deep 的情况下传递 .v-autocomplete__content.v-menu__content 类

Answer 1

如果您查看 DOM 中 v-autocomplete__content div 的位置，您会发现它附加到您的根 v-app 组件，而不是组件内部。要更改此功能，Vuetify 为您提供了 attach 属性，您可以在其中指定 v-autocomplete 将其自身附加到您想要的任何元素（例如您的组件根）。这将允许作用域样式达到您的 v-autocomplete

<v-container fluid id="auto-complete-container">
  <v-row align="center">
    <v-col cols="4">
      <v-autocomplete
        v-model="value"
        :items="items"
        attach="#auto-complete-container"
      ></v-autocomplete>
    </v-col>
  </v-row>
</v-container>