我有一个自动完成输入与附加的内部图标,有一个点击功能附加,然后清除功能被启用. 如果单击清除,则会出现选项菜单,如果单击附加图标,则会出现选项菜单.我不希望这些图标启动选项菜单,因为用户不会单击它们,并单击其他地方启用选项.下面是我的代码.如何禁用这些图标的选项事件?

<v-autocomplete
                      v-for="(header,index) in headers"
                      :key="index"
                      v-model="header.filtered"
                      class="my-5"
                      clearable
                      chips
                      :label="header.title"
                      :items="getUniqueList(displayedReviews,header.key)"
                      multiple
                      density="compact"
                      variant="outlined"
                      hide-details
                      single-line
                      flat
                      @blur="applyFilters()"
                      :append-inner-icon="header.visible ? 'mdi-eye' : 'mdi-eye-off'"
                      @click:append-inner="header.visible = !header.visible"
                    >
                    </v-autocomplete>

推荐答案

vuetify2中,您可以使用preventDefault来阻止菜单选项被打开.

...           
append-icon="mdi-eye"
@click:append="
  (e) => {
    e.preventDefault();
  }
"

我猜你正在使用Vuetify3,这似乎是vuetify3中的一个bug.

我建议你使用append图标而不是使用append—inner图标.

示例:append icon for detailed information

Javascript相关问答推荐

我的YouTube视频没有以html形式显示,以获取免费加密信号

Express.js:使用Passport.js实现基于角色的身份验证时出现太多重定向问题

如何通过onClick为一组按钮分配功能;

为什么promise对js中的错误有一个奇怪的优先级?

在Three JS中看不到补间不透明度更改效果

ChartJs未呈现

使用getBorbingClientRect()更改绝对元素位置

当我在Reaction中创建一个输入列表时,我的输入行为异常

面对代码中的错误作为前端与后端的集成

SPAN不会在点击时关闭模式,尽管它们可以发送日志(log)等

<;img>;标记无法呈现图像

在Odoo中如何以编程方式在POS中添加产品

无法重定向到Next.js中的动态URL

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?

ComponentWillReceiveProps仍在React 18.2.0中工作

TypeORM QueryBuilder限制联接到一条记录

Promise.race()返回已解析的promise ,而不是第一个被拒绝的promise

连续添加promise 时,如何在所有promise 都已结算时解除加载覆盖

将延迟加载的模块转换为Eager 加载的模块

在点击链接后重定向至url之前暂停