How to reset vue-multiselect component?

Question

I am using Vue-Multiselect and having trouble understanding how to reset the vue-multiselect component if a user clicks the "reset" button.

Here is my code: Codesandbox

Template:

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

Script:

<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>

CustomerSelect:

<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

I think you should pass a prop to your CustomerSelect component, which will let you set the value from outside the component.

Just to make it easy, you can use v-model which creates a prop called value and listens for the input event.

I've created a snippet below which demonstrates how it works.

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>