我正在使用Vue-Multiselect如果用户单击“重置”按钮,则无法理解如何重置 vue-multiselect 组件。
这是我的代码: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 }} —
<small>{{ props.option.email }}</small>
</template>
<template slot="option" slot-scope="props">
<strong>{{ props.option.lastname }}</strong>
, {{ props.option.firstname }} —
<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>
最佳答案
我认为您应该将一个 prop 传递给您的 CustomerSelect
组件,这将允许您从组件外部设置值。
为了简单起见,您可以使用 v-model
创建一个名为 value
的 prop 并监听 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="502625357d3d253c243923353c35332410627e617e60" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="463033236b2b332a322f35232a232532067468776876" rel="noreferrer noopener nofollow">[email protected]</a>/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>
关于vue.js - 如何重置 vue-multiselect 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61954724/