Vue-MultiSelect:在选择事件期间似乎无法从对象获取属性 编辑后添加:

我正在使用Vue-Multiselect插件作为输入下拉框,并试图在填写表单时获得客户的姓氏。由于某种原因,我只是将object属性的值用作issue.customer_last_name(请参见下面的屏幕截图)。我想获取一个字符串Doe

有人有什么想法吗?我的目标是最终通过“提交”按钮将此数据(POST请求)提交到远程api。

Vue-MultiSelect:在选择事件期间似乎无法从对象获取属性
      
    编辑后添加:

指向复制该问题的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>
X00400 回答:Vue-MultiSelect:在选择事件期间似乎无法从对象获取属性 编辑后添加:

问题是多选本身上的v-model="issue.customer_last_name"。这就是将多选组件的选择设置为用户选择的整个对象,而不仅仅是姓氏。

由于您正在使用@select="onSelect"进行所有必要的更新,因此只需删除v模型(代码沙箱中的第6行),就可以完成所有工作。

编辑后添加:

当您看到无用的[object Object]时,将其呈现在更可能完全扩展的其他位置可能会很有用。这全都取决于浏览器,但是添加<div>{{issue.customer_last_name}}</div>是一个有用的调试工具。

本文链接:https://www.f2er.com/3142062.html

大家都在问