如何重置 vue-multiselect 组件?
How to reset vue-multiselect component?
我正在使用 Vue-Multiselect 并且无法理解如果用户单击 "reset" 按钮如何重置 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>
我认为您应该向 CustomerSelect
组件传递一个 prop,这样您就可以从组件外部设置值。
为了简单起见,您可以使用 v-model
创建一个名为 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>
我正在使用 Vue-Multiselect 并且无法理解如果用户单击 "reset" 按钮如何重置 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>
我认为您应该向 CustomerSelect
组件传递一个 prop,这样您就可以从组件外部设置值。
为了简单起见,您可以使用 v-model
创建一个名为 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>