如何根据我选择的值删除其他值？

Question

当使用 Vuetify v-autocomplete 组件并使用 prop multiple 时，我们可以多个 select 个值。

如何根据我select编辑的值去掉其他值？

例如：

当我select主值时，其他会selected removed.Then，当我select第一个值，主值和其他值将被删除select。然后当我 select 第三个和其他人（第三个及以下在同一组中）时 selected main 和第一个值将被 selected 删除。

<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

你好@sercan，你可以在这个事件上使用@change事件和调用方法，并在该方法中编写你的逻辑。

<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 */
}

} });