Vuetify 附加项目以选择菜单未选择正常项目答案

【问题标题】：Vuetify append item to select menu not selecting as normal itemVuetify 附加项目以选择菜单未选择正常项目
【发布时间】：2019-10-21 01:35:09
【问题描述】：

我有一个使用 Vuetify (Vue 2.0) 的简单选择菜单，如下所示：

https://jsfiddle.net/2ku5a6f4/

选项已添加，但菜单不会像其他选项一样关闭和选择，并且菜单保持打开状态

我的参考来自 Vuetify 文档：https://vuetifyjs.com/en/components/selects

在“添加/添加项目槽”下

<div id="app">
    <v-app dark>
        <v-select
          :items="items"
          clearable
          v-model='selectedItem'
          label="...will 'four' close menu?"
        >

          <template v-slot:append-item>
            <v-divider class="mb-2"></v-divider>
            <v-list-tile >
              <v-list-tile-content>
                four
              </v-list-tile-content>
            </v-list-tile>
          </template>

        </v-select>

    </v-app>
</div>

var vm = new Vue({
    el: "#app",

    data: {
        items: ["one", "two", "three"],
        selectedItem: ''
    }
});

【问题讨论】：

在提供的 jsfiddle 中，您正在使用明显过时的 vuetify v0.14.8 并在 v1.5.14 引用文档，这可能会导致麻烦。

标签： vuejs2 vuetify.js

【解决方案1】：

我收到了 Vuetify 开发人员的答复：

我需要添加： :menu-props="{closeOnContentClick: true}"

<v-select
      :items="items"
      clearable
      v-model='selectedItem'
      :menu-props="{closeOnContentClick: true}"
      label="...will 'four' close menu?">

【讨论】：

【解决方案2】：

您使用的是v0.14.8 版本，甚至v0.15 都不支持想要的插槽。考虑更新。

https://v1.vuetifyjs.com/releases/0.15/#/components/selects

【讨论】：

我会更新小提琴。这可以解释我的生产代码和小提琴之间的差异。 ..糟透了，因为我使用了 vuetify 基本小提琴'
@mattyd 为了让它点击，添加@click事件。但是我不确定如果你关闭它，你是否可以添加不在你的项目中的新项目。
是的，我确实使用点击处理程序来执行生产中的操作。它可以工作，但菜单在转换后仍然存在。我想附加一个项目应该表现得像一个项目？