Vue-MultiSelect：在 select 事件期间似乎无法从对象获取属性

Question

我正在使用 Vue-Multiselect 插件作为输入下拉框，并试图在客户填写表格时获取他们的姓氏。出于某种原因，我只是得到一个 object 作为 issue.customer_last_name 属性的值（见下面的截图）。我想得到一个字符串 Doe，而不是。

有人有什么想法吗？我的目标是最终通过提交按钮将此数据（POST 请求）提交到远程 api.

Link 到 codesandbox 复制问题：https://codesandbox.io/s/vue-template-9z1wd?fontsize=14&module=%2Fsrc%2Fcomponents%2FTest.vue

Full code:

<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>

Answer 1

问题出在 multi-select 本身的 v-model="issue.customer_last_name" 上。那就是将 multi-select 组件的 selection 设置为用户 select 的整个对象，而不仅仅是姓氏。

由于您正在使用 @select="onSelect" 进行所有必要的更新，只需删除 v-model（代码沙箱中的第 6 行）即可。

编辑添加：

当您看到无用的 [object Object] 时，将其呈现在其他地方可能会很有用，因为在其他地方更有可能完全展开。这在某种程度上取决于浏览器，但添加 <div>{{issue.customer_last_name}}</div> 是一个有用的调试工具。

Vue-MultiSelect：在 select 事件期间似乎无法从对象获取属性

Vue-MultiSelect: Can't seem to get property from an object during select event

vue.js

vue-multiselect

编辑添加：

Vue-MultiSelect：在 select 事件期间似乎无法从对象获取 属性

Vue-MultiSelect: Can't seem to get property from an object during select event

vue.js

vue-multiselect

编辑添加：

Vue-MultiSelect：在 select 事件期间似乎无法从对象获取属性