CODEWITHSUNDEEP
vuetify.js
JokerMartini
JokerMartini

Reputation: 6147

Use Chips in Vue Text Field

How can I use chips in a Vue Text Field? The functionality I'm trying to replicate is kinda similar to the StackOverflow's Tag field. However I do not want auto-complete nor a dropdown list. Just a simple text field that displays chips for the items.

I have this enter image description here

however im trying to get this enter image description here

component.vue

<v-combobox
  v-model="item.tokens"
  chips
  clearable
  multiple
  filled
  rounded
>
    <template v-slot:selection="{ attrs, item, select, selected }">
        <v-chip
          small
          v-bind="attrs"
          :input-value="selected"
          close
          @click="select"
          @click:close="remove(item)"
          >
          {{ item }}
        </v-chip>
    </template>
</v-combobox>


<script>
export default {
  data() {
    return {
      items: [
        {
          name: "Apples",
          tokens: [
            "_apple",
            "_a",
          ],
          backgroundColor: "#000000",
          backgroundEnabled: false
        },
        {
          name: "Oranges",
          tokens: ["_orange", "_o"],
          backgroundColor: "#000000",
          backgroundEnabled: false
        },
        {
          name: "Grapes",
          tokens: ["_grape", "_g", "_grapes"],
          backgroundColor: "#000000",
          backgroundEnabled: false
        }
      ]
    };
  },
};
</script>

Upvotes: 1

Views: 7436

Answers (1)

Guizboule
Guizboule

Reputation: 195

Add the props append-icon="" in your v-combobox.

You will have something like this :

<v-combobox
  v-model="item.tokens"
  chips
  clearable
  multiple
  filled
  rounded
  append-icon=""
>
    <template v-slot:selection="{ attrs, item, select, selected }">
        <v-chip
          small
          v-bind="attrs"
          :input-value="selected"
          close
          @click="select"
          @click:close="remove(item)"
          >
          {{ item }}
        </v-chip>
    </template>
</v-combobox>

Upvotes: 4

Related Questions