[Vuejs]-How can I remove other values ​based on the value I selected?

1👍

Hi @sercan you can use the @change events and call method on this event and write your logic within that method.

<div id="app">
<v-app>
<v-main>
  <v-container>
    <template>
      <v-card color="blue-grey darken-1" dark>
        <v-form>
          <v-container>
            <v-row>
              <v-col cols="5">
                <v-autocomplete v-model="parametres" :items="people" filled chips color="blue-grey lighten-2" label="Liste" item-text="name" item-value="name"  multiple :key="index">
                  <template v-slot:selection="data">
                    <v-chip v-bind="data.attrs" :input-value="data.selected" close @click="data.select" @click:close="remove(data.item)">
                      {{ data.item.name }}
                    </v-chip>
                  </template>
                  <template v-slot:item="data">
                    <template v-if="typeof data.item !== 'object'">
                      <v-list-group>
                        <v-list-item-content v-text="data.item">
                          <span>{{typeof data.item !== 'object'}}</span>
                        </v-list-item-content>
                    </template>
                    <template v-else>
                      <v-list-item-content @click="updateSelection(data.item.name)">
                        <v-list-item-title  v-html="data.item.name"></v-list-item-title>
                      </v-list-item-content>
                      </v-list-group>
                    </template>
                  </template>
                </v-autocomplete>
              </v-col>
            </v-row>
          </v-container>
        </v-form>
        <v-divider></v-divider>
      </v-card>
    </template>
  </v-container>
</v-main>
 new Vue({
  el: "#app",
  vuetify: new Vuetify(),
   data() {
return {
  selected: ["name"],
  autoUpdate: true,
  parametres: ["Main Select"],
  people: [
    { name: "Main Select" },
    { name: "First Select" },
    { name: "Second Select" },
    { name: "Third Select." },
    { name: "Fourth Select." },
    { name: "Fifth Select." }
  ],
  model: 1,
  index: 0
};

},

  methods: {
updateSelection(name) {
  let toRemove = ["Main Select","First Select"];
  let temp = event;
  console.log(name);
  switch (name) {
    case "Main Select":
      this.parametres = ["Main Select"];
      this.index++;
      break;
    case "First Select":
      this.parametres = ["First Select"]
      this.index++;
      break;
    default:
      this.parametres = this.parametres.filter( ( el ) => !toRemove.includes( el ) );
  }
},
remove(item) {
  const index = this.parametreler.indexOf(item.name); /*Chip Remove */
  if (index >= 0) this.parametreler.splice(index, 1); /*Chip Remove */
}

}
});

Leave a comment