我正在使用Vue-Multiselect插件作为输入下拉框,并试图在填写表单时获得客户的姓氏。由于某种原因,我只是将object
属性的值用作issue.customer_last_name
(请参见下面的屏幕截图)。我想获取一个字符串Doe
。
有人有什么想法吗?我的目标是最终通过“提交”按钮将此数据(POST请求)提交到远程api。
指向复制该问题的codeandbox的链接: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",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>