时间戳

首页 > 解决方案 > 重置 v-autocomplete 中的选择值，以便添加多个项目

vue.js - 重置 v-autocomplete 中的选择值，以便添加多个项目

问题描述

我正在创建一个应用程序，它有一个选择框来在一些模板数据之间进行选择。但是，用户应该能够多次选择相同的模板选项，并且每次选择模板时，屏幕中都会出现一个新的信息框。

我的问题是 v-autocomplete 组件不支持这种行为：我们可以选择一个选项（或多个选项），但不能两次选择相同的选项。

我想过做这样的事情：每次用户选择选项 A 时，信息框都会出现在下方，并且组件将重置为空选项。然后，用户可以再次选择选项A，当他选择它时，会出现另一个信息框，用户需要多少次。

我怎么能用 vue 做这样的事情？我没有找到任何默认情况下会执行此类操作的组件，所以我想我必须调整组件的行为，但我不知道从哪里开始。

我的模板：

<template>
  <div class="select-wrapper" id="selectBox">
    <v-autocomplete
      class="select-input"
      :items="items"
      :name="label"
      placeholder="select item"
      solo
      :value="value"
      @change="$event => onChange($event, items)"
      item-text="name"
      item-value="value"
      :required="required"
      :rules="[
        value =>
          !required ||
          !!value ||
          "required"
      ]"
    ></v-autocomplete>
  </div>
</template>

还有我的 Vue 代码：

<script lang="ts">

import { defineComponent } from "@vue/composition-api";
import Vue from "vue";

interface SelectItem {
    name: string,
    value: string
}

interface SelectBoxProps {
  items: SelectItem[];
  value: string;
  onSelect: ({ target }: { target?: SelectItem }) => void;
  hasResetSelection: boolean;
}

export default defineComponent({
  name: "SelectBox",
  props: {
    label: String,
    items: Array,
    value: [String, Number],
    onSelect: Function,
    disabled: Boolean,
    required: {
      type: Boolean,
      default: false
    },
    hasError: Boolean,
    errorMessage: String,
    hasResetSelection: {
      type: Boolean,
      default: false
    }
  },
  directives: {
    ClickOutside
  },
  setup({ onSelect, hasResetSelection }: SelectBoxProps) {
    const onChange = (selectedValue: string, itemsArr: SelectItem[]) => {
      const targetItem = itemsArr.find(i => i.value === selectedValue);

      if (hasResetSelection) {
        Vue.nextTick(() => {
          console.log("onselect should reset value");
          return onSelect({ target: { name: "", value: "" } });
        });
      }
      return onSelect({ target: targetItem });
    };

    return {
      onChange
    };
  }
});
</script>

这是我对Vue.nextTick的最后一次尝试，我已经尝试使用ref()调整组件，但效果不佳。你有什么建议吗？

标签： vue.jsvuetify.js

解决方案

您可以使用另一个变量来保存autocomplete组件的输入，如下所示：

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: [{ name : 'hello', value : 1 }, { name : 'world', value : 2 }],
    value : null,
    values : []
  },
  methods: {
    onChange() {
      this.values.push(this.value)
      this.$nextTick(() => {
          this.value = null
      })
    },
  }
})
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-container>
      Values : {{values}}
      <v-autocomplete
        :items="items"
        placeholder="select item"
        solo
        v-model="value"
        item-text="name"
        item-value="value"
        @change="onChange"
      />
    </v-container>
  </v-app>
</div>

推荐阅读