Question 43927 in Html Question posted in
Some basic documentation can be found here.

Selected items disappear during search in v-select selections – Html

I have implemented something similar to this code pen in one of my projects.

https://codepen.io/sudheer-ranga/pen/bGVbjbx

There is one issue that am facing, the selected items disappear for invalid search.
So, I found out that the items prop is mutating. Furthermore, I added cache-items prop, that did keep the selected items intact. But now the search would not filter the items.

Next, I added a computed property to get the updated items after search and update it in the items.

computed: {
 finalOptions() {
    return this.fruitsCopy;
 }
}

https://codepen.io/nyfer/pen/VwGdKvy

But that doesn’t work too.
So, I would like to know how I can go about this.

Tags:

2

Answers


  1. 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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
    Login or Signup to reply.
  2. 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,
];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search