vue.js - 如何重置 vue-multiselect 组件？

Question

如果用户单击“重置”按钮，我正在使用Vue-Multiselect并且无法理解如何重置 vue-multiselect 组件。

这是我的代码：Codesandbox

模板：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <CustomerSelect @selectedUser="customUser"/>
    <button type="button" @click="resetCustomQuery()">Reset</button>
  </div>
</template>

脚本：

<script>
import CustomerSelect from "@/components/CustomerSelect.vue";
export default {
  name: "HelloWorld",
  components: {
    CustomerSelect
  },
  props: {
    msg: String
  },
  data() {
    return {
      custom: {
        user_id: null
      }
    };
  },
  methods: {
    customUser(user) {
      this.custom.user_id = user.uid;
    },
    resetCustomQuery() {
      this.custom.user_id = ""; // <--- how to reset ??
    }
  }
};
</script>

客户选择：

<template>
  <div>
    <multiselect
      id="user_last_name_input"
      v-model="user"
      :options="userProfiles"
      label="lastname"
      placeholder="Select or search for an existing user"
      track-by="uid"
      :close-on-select="true"
      @select="onSelect"
      :loading="isLoading"
      :custom-label="userSelectName"
      aria-describedby="searchHelpBlock"
      selectLabel
    >
      <template slot="singleLabel" slot-scope="props">
        {{ props.option.lastname }}, {{ props.option.firstname }} &mdash;
        <small>{{ props.option.email }}</small>
      </template>
      <template slot="option" slot-scope="props">
        <strong>{{ props.option.lastname }}</strong>
        , {{ props.option.firstname }} &mdash;
        <small>{{ props.option.email }}</small>
        <small v-if="props.option.c_organization">, {{ props.option.c_organization }}</small>
      </template>
      <template slot="noResult">Looks like this user doesn't exist yet.</template>
    </multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import { mapState } from "vuex";
export default {
  components: { Multiselect },
  data() {
    return {
      user: "",
      isLoading: true
    };
  },
  async created() {
    // await this.$store.dispatch("fetchUserProfiles");
    this.isLoading = false;
  },
  methods: {
    //this determines what can be searched in the dropdown
    userSelectName(option) {
      return `${option.lastname}, ${option.firstname}, ${option.email}`;
    },
    // send the user object to IssueResponse.vue
    onSelect(userObj) {
      this.$emit("selectedUser", userObj);
    }
  },
  computed: {
    ...mapState(["userProfiles"])
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

Answer 1

我认为您应该将一个道具传递给您的CustomerSelect组件，这将使您可以从组件外部设置值。

为了简单起见，您可以使用v-modelwhich 创建一个名为value并侦听input事件的道具。

我在下面创建了一个片段来演示它是如何工作的。

Vue.component("customer-select", {
  components: {
    Multiselect: window.VueMultiselect.default
  },
  template: "<Multiselect :value='value' @input='onInput' :options='options'></Multiselect>",
  props: ["value"],
  data: () => {
    return {
      options: ['list', 'of', 'options']
    }
  },
  methods: {
    onInput(ev) {
      this.$emit("input", ev);
    }
  }
});

new Vue({
  el: "#app",
  data: () => {
    return {
      customer: null
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
<div id="app">

  <div>
    <customer-select v-model="customer"></customer-select>
    <button type="button" @click="customer = null">Reset</button>
  </div>

  <div>
    <label>Selected Customer: </label> {{customer}}
  </div>
</div>