How can I remove other values ​based on the value I selected?

Question

When using Vuetify v-autocomplete component and using the prop multiple we can multi select values.

How can I remove other values based on the value I selected?

For example:

When I select the main value, the others will be selected removed.Then, when I select the first value, the main value and other values will be deselected. Then when I select the third and others (the third and below are in the same group) the selected main and first value will be selected removed.

<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
                    >
                      <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"
                          ></v-list-item-content>
                        </template>
                        <template v-else>                              
                          <v-list-item-content>
                            <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>
  </v-app>
</div>


<script>
  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,            
      };
    },
    methods: {         
      remove(item) {                      
        const index = this.parametreler.indexOf(item.name);/*Chip Remove */
        if (index >= 0) this.parametreler.splice(index, 1); /*Chip Remove */         
      },          
    },
  });
</script>

Answer 1

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