vuejs中左侧或右侧带有操作（按钮）的文本字段答案

【问题标题】：Text Field with action (button) on the left or right in vuejsvuejs中左侧或右侧带有操作（按钮）的文本字段
【发布时间】：2019-08-27 09:21:11
【问题描述】：

我无法在文本字段中设置按钮

   <v-text-field
      outlined 
      label="Other items"
      color="primary"
      >
      <template v-slot:append>
        <v-btn
          depressed 
          tile
          color="white"
          class="ma-0"
          @click="deleteTypedItem(index)">
          <v-icon  color="grey">clear</v-icon>
        </v-btn>
      </template>
    </v-text-field>

通过上面的代码，我是这样的

【问题讨论】：

文本字段不是其他小部件/组件的占位符
@Begueradj 但他可以添加可清除的道具或附加我在答案中提到的清除图标
我以为他想在文本字段中放置一个按钮

标签： vue.js vuetify.js

【解决方案1】：

<v-text-field
      outlined 
      label="Other items"
      color="primary"
      append-icon="mdi-close"
      @click:append="deleteTypedItem(index)" 
      >
    </v-text-field>

【讨论】：

【解决方案2】：

使用可清除

<v-text-field
      outlined 
      label="Other items"
      color="primary"
       Clearable
       @click:clear="clearCustomer"
      >
    </v-text-field>

注意：图标仅在字段中输入可见文本，否则图标隐藏

【讨论】：