vue.js中左侧或右侧带有操作（按钮）的文本字段

Question

我无法在文本字段内添加按钮

   <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>

通过上面的代码，我变得像这样

Answer 1

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

Answer 2

使用可清除

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

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