Text Field with action (button) on the left or right in vuejs

Question

I am not able to have a button inside a text field

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

by the above code, I am getting like this

Answer 1

use Clearable

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

Note: icon only visible text entered in field otherwise icon hidden

Answer 2

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