Question

我找不到清除选择项目后调用的方法“afterselection”中的选择字段的方法：

模板：

<v-select
 :items="adrlist"
 @input="afterselection"        
 ></v-select>

选择中的数据：

const addressList = [{
"text":"Street 523, 2533",
"value":[1723455.7054408004,5923451.382843224]},
{"text":"Lala 3, 3455",
"value":[1723455.7054408004,5923451.382843224],
}]

VUE代码：

new Vue({
  el: '#app',
  data () {
    return {
      adrlist: addressList,
    }
  },
  methods:{
    afterselection(item){
      console.log(item);
      //here I want to clear the select
    },
  },
})

以下是使用此示例的代码笔：
codepen example

我试图将v-model设置为null，但这不起作用。

我已经研究并试了好几天了，我真的找不到解决方案： - /

Answer 1

仅供参考，您可以使用

清除vuetify中的选择字段

this.$nextTick(() => {
    this.selected = null  
  })

重要的是＆＃34; nextTick＆＃34;！否则它不会被渲染......

请参阅vuetify-dev提供的此codepen： working codepen

Answer 2

看起来您需要绑定到选择的v模型，该模型是计算属性。然后可以通过@input事件更改该值。

Answer 3

我面临着同样的问题。我在卡文本块中有几个v-select组件，并清除了btn。当我单击清除时，我将运行清除功能并通过引用清除所有v选择项。

模板：

 <v-card>
  <v-card-title>Filters</v-card-title>
  <v-card-text v-if="selectFilters.length">
    <v-select
      :ref="filter.id"
      v-for="filter in selectFilters"
      :items="filter.items"
      :key="filter.id"
      :label="filter.alias"
      multiple
      return-object
      clearable
      @input="selectChangeHandler($event, filter.id)"
    ></v-select>
  </v-card-text>
  <v-card-actions>
    <v-btn color="primary" @click="clear">Clear</v-btn>
  </v-card-actions>
</v-card>

脚本：

methods: { 
  ...
  clear: function() {
    Object.values(this.$refs).forEach(ref => {
      const vueSelect = ref[0];
      vueSelect.internalValue = [];
    });
  },
}

Answer 4

您可以通过将ref添加到组件中来实现

test

然后随时使用<v-select ref="adrlistRef" :items="adrlist" @input="afterselection" ></v-select>组件的reset方法！

v-select

选择项

4 个答案: