CODEWITHSUNDEEP
vue.jsvuejs2vuetify.jsv-select
Pillo
Pillo

Reputation: 357

Change style and colors of chips in v-select

How can I change the color and style of chips in v-select?

I have code like this:

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint
>
</v-select>

enter image description here

How can I change chips to styled label and color blue?

Upvotes: 6

Views: 14247

Answers (4)

Mohammad Chavoshi
Mohammad Chavoshi

Reputation: 192

When working with the <v-select> component in Vue.js projects, it's wise to make use of the configuration options provided by vuetify.js. By doing so, you can set up the component once and avoid repeating the same configuration code throughout your project. This approach not only helps to reduce code duplication but also makes it easier to maintain and update your instances globally.

export default createVuetify({
defaults: {
VSelect:{
      VChip:{
        closeIcon:"fa-solid fa-xmark",
        class:".........",
        style:"..."
      }
    },
}
})

Upvotes: 0

George Marios
George Marios

Reputation: 183

I have been in your shoes and I think that, if you need deleteable chips, reimplementing the delete chip functionality just for the sake of changing a color is an overkill.

Since your goal is stylistic I would suggest that you use a simple scss solution:

<template>
 <v-select
   class="mySelect"
   v-model="value"
   :items="roles"
   :menu-props="{ top: true, offsetY: true }"
   small-chips
   label="Roles"
   multiple
   hint="Select the role"
   persistent-hint
   deletable-chips
 >
 </v-select>
</template>
<script>
export default {
 data() {
   return {
     roles: ['role1', 'role2'],
   }
 },
}
</script>
<style lang="scss" scoped>
 .mySelect::v-deep .v-chip {

   /* chip background color */
   background-color: var(--v-primary-base);
   
   /* chip text color */
   color: white;

   /* chip X color */
   button {
     color: white;
 }
}
</style>

Notice the .mySelect::v-deep selector that enables the rule to apply in the specific element, even in a scoped style block.

EDIT:

  • Included Andy's suggestion
  • Added explanatory comments in style
  • Removed unnecessary !important
  • Added dummy roles in data to make the answer copy/paste testable

Upvotes: 3

Thinh NV
Thinh NV

Reputation: 3802

If we use selection slot to customize the chip as we want like @YomS. show above, we cannot use chips and deletable-chips props to make that chip deletable.

For anyone also need to implement deletable-chips in selection slot, here my snippet:

<template>
    <v-select
          v-model="styleSelection" // Linking that v-select to one array
    
          clearable
          multiple
          :items="travelStyles"
          label="Travel Style"
        >
          <template #selection="{ item }">
            <v-chip
              
              color="primary"

              close
              @click:close="deleteChip(item, styleSelection)" // call a method deleteChip

              >{{ item }}</v-chip
            >
          </template>
        </v-select>
</template>

<script>
  export default {
    data: () => ({
      styleSelection: [],
      travelStyles: [
        'Discovery',
        'Family',
        'In-depth Cultural',
        'Historical',
        'Food & Culinary',
        'Adventure',
        'Beach',
        'Hiking & Trekking',
        'Bicycle',
        'Sightseeing',
        'Boat',
        'River Cruise',
        'Ocean Cruise',
      ],

    }),
    methods: {
      deleteChip(itemNeedToRemove, array) {
        for (let i = 0; i < array.length; i += 1) {
          if (array[parseInt(i, 10)] === itemNeedToRemove) {
            array.splice(i, 1);
          }
        }
      },
    },
  };
</script>

Beside Selects v-select, it also works with Autocomplete v-autocompletes, the snippet is exactly the same.

If you want to customize the chip color and make it deletable in V-autocompletes, you can take the look on the code below:

      <v-autocomplete
        v-model="citySelection"
        clearable
        multiple
        :items="city"
        label="Where do you want to go?"
        :search-input.sync="search"
        @change="search = ''"
      >
        <template #selection="{ item }">
          <v-chip
            close
            color="primary"
            @click:close="deleteChip(item, citySelection)"
            >{{ item }}</v-chip
          >
        </template>
      </v-autocomplete>

Upvotes: 3

Yom T.
Yom T.

Reputation: 9180

You probably want the selection slot.

<v-select
  v-model="value"
  :items="roles"
  :menu-props="{ top: true, offsetY: true }"
  small-chips
  label="Roles"
  multiple
  hint="Select the role"
  persistent-hint>
  <template #selection="{ item }">
    <v-chip color="blue">{{item.name}}</v-chip>
  </template>
</v-select>

Where item.name would depend on these individual items of roles.

Upvotes: 11

Related Questions