我正在使用Vue-Multiselect插件作为输入下拉框,并在填写表格时尝试获取客户的姓氏。出于某种原因,我只是得到一个object
作为issue.customer_last_name
属性的值(见下面的截图)。我想得到一个 string Doe
,而不是。
有人有想法么 ?我的目标是最终通过提交按钮将此数据(POST 请求)提交到远程 api。
复制问题的代码和框链接: https ://codesandbox.io/s/vue-template-9z1wd ?fontsize=14&module=%2Fsrc%2Fcomponents%2FTest.vue
完整代码:
<template>
<div>
<label for="customer_last_name_input">Last Name:</label>
<multiselect
id="customer_last_name_input"
v-model="issue.customer_last_name"
:options="customers"
placeholder="Select an existing customer or type to add a new one"
:custom-label="customerSelectName"
label="lastname"
track-by="uid"
:close-on-select="true"
@select="onSelect"
></multiselect>
<br>
<!-- <input id="customer_last_name_input" type="text" class="form-control" v-model="issue.customer_last_name" placeholder required /> -->
<div>
<label for="customer_first_name_input">First Name:</label>
<input
id="customer_first_name_input"
type="text"
v-model="issue.customer_first_name"
placeholder
required
>
</div>
</div>
</template>
<script>
import Multiselect from "vue-multiselect";
export default {
name: "test",
components: {
Multiselect
},
data() {
return {
customers: [
{
uid: "1",
firstname: "John",
lastname: "Doe",
email: "johndoe@aol.com",
phone: null,
c_organization: "ACME",
c_title: null
},
{
uid: "2",
firstname: "Mary",
lastname: "Smith",
email: "msmith@aol.com",
phone: null,
c_organization: "NBA",
c_title: "Miss"
}
],
issue: {
customer_first_name: "",
customer_last_name: ""
//customer_email: ""
}
};
},
// async created() {
// await this.getCustomers()
// },
methods: {
customerSelectName(option) {
//return `${option.lastname}, ${option.firstname}`
return `${option.lastname}, ${option.firstname}`;
},
onSelect(option) {
console.log(option.lastname);
this.issue.customer_last_name = option.lastname;
this.issue.customer_first_name = option.firstname;
// this.issue.customer_email = option.email
}
}
};
</script>