Vuetify 有没有办法禁用/启用 v-text-field 附加图标答案

【问题标题】：Vuetify Is there a way to disable/enable a v-text-field append-iconVuetify 有没有办法禁用/启用 v-text-field 附加图标
【发布时间】：2021-03-01 17:08:39
【问题描述】：

我有一个带有附加图标的表单 v-text-field，可在单击时触发方法。

有没有办法有条件地禁用/启用这个附加图标？

我的意思是禁用而不是隐藏。

（Vuetify 版本 1.5.24）

【问题讨论】：

据我所知 append-icon 默认没有动作。你声明你自己的点击处理程序？您可以简单地忽略其中的操作，因为您处于“禁用”状态，是吗？
发布一个最小的代码，看看你到目前为止做了什么。

标签： javascript vuetify.js

【解决方案1】：

您可以使用图标槽来放置可以控制的v-btn。请查看下面的示例。

<v-text-field
  v-model="message"
  label="Message"
  type="text"
>
  <template v-slot:append-outer>
    <v-btn
      v-bind="attrs"
      disabled
      v-on="on"
    >
      <v-icon>
        mdi-menu
      </v-icon>
    </v-btn>
  </template>
</v-text-field>

【讨论】：