[Vuejs]-Selected items disappear during search in v-select selections

by

0👍

I think the general recommendation is to not implement your own search, but instead use Vuetify’s v-autocomplete, which is a select with builtin search capability:

<v-autocomplete
  v-model="selectedFruits"
  :items="fruits"
  attach label="Favorite Fruits"
  multiple
></v-autocomplete>

If you insist on having the input on top of the item list, you can still use the same slot you used before and make the initial input invisible:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      searchTerm: '',
      selectedFruits: [],
      fruits: [
        "Apples",
        "Apricots",
        "Avocado",
        "Bananas",
        "Blueberries",
        "Blackberries",
        "Boysenberries",
        "Bread fruit",
        "Cantaloupes (cantalope)",
        "Cherries",
        "Cranberries",
        "Cucumbers",
        "Currants",
        "Dates",
        "Eggplant",
        "Figs",
        "Grapes",
        "Grapefruit",
        "Guava",
        "Honeydew melons",
        "Huckleberries",
        "Kiwis",
        "Kumquat",
        "Lemons",
        "Limes",
        "Mangos",
        "Mulberries",
        "Muskmelon",
        "Nectarines",
        "Olives",
        "Oranges",
        "Papaya",
        "Peaches",
        "Pears",
        "Persimmon",
        "Pineapple",
        "Plums",
        "Pomegranate",
        "Raspberries",
        "Rose Apple",
        "Starfruit",
        "Strawberries",
        "Tangerines",
        "Tomatoes",
        "Watermelons",
        "Zucchini"
      ],
    };
  },
})
.v-select__selections input{
  opacity: 0;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
<div class="pa-4">
    <v-autocomplete v-model="selectedFruits" :items="fruits" attach label="Favorite Fruits" :search-input.sync="searchTerm" multiple>
    <template v-slot:prepend-item>
          <v-list-item>
            <v-list-item-content>
              <v-text-field v-model="searchTerm" placeholder="Search" @input="searchFruits"></v-text-field>
            </v-list-item-content>
          </v-list-item>
          <v-divider class="mt-2"></v-divider>
        </template>
    
    </v-autocomplete>
</div>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

0👍

You need to push back selected items to search,
see here codepen.io

// Option 1 forEach
this.selectedFruits.forEach((selectedFruit) => {
    this.fruits.push(selectedFruit);
});
      
// Options 2 spread syntax
this.fruits = [
    ...this.selectedFruits,
    ...this.fruits,
];

Leave a comment