0

我有 2 个模型：联系人和具有多对多关联的网点，我试图在编辑表单中为联系人选择多个网点。选择选项显示正确，但是，对于现有的关联，我变得不确定。我将 v-model 与 contact.outlets 相关联，但我看不到在哪里指定要显示的属性。目前，对于任何关联的 Outlet，标记化元素读取为“未定义”

我也在 Vue 控制台中收到此错误：“[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.” 我知道选择需要一个特定的属性，比如一个 id，但是我该如何选择一个对象呢？

这是我的编辑表单组件：

<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form @submit="editContact" :form="form">
      <h5 class="font-md">Edit contact</h5>

      ...

      <a-form-item :label="`${contact.name}'s Outlets`"
                   :wrapperCol="{lg: {span: 20}, sm: {span: 24} }">
        <a-select
            mode="multiple"
            v-model="contact.outlets"
            style="width: 100%"
            placeholder="Please select"
        >
          <a-select-option v-for="outlet in outlets" :key="outlet.id">
            {{ outlet.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
          :wrapperCol="{ span: 24 }"
          style="text-align: center"
      >
        <a-button htmlType="submit" type="primary">Update Contact</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import API from "@/utils/Api"
export default {
  name: 'EditContact',
  data () {
    return {
      form: this.$form.createForm(this),
      contactId: this.$route.params.id,
      contact: {},
      outlets: [],
    }
  },
  methods: {
    // handler
    async editContact(e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (err) {
          console.error(err)
          return;
        }
        try {
          let {data} = await API.put('contacts/' + this.contact.id, {
            name: this.contact.name,
            bio: this.contact.bio,
            image_url: this.contact.image_url,
            email: this.contact.email,
            outlets: this.contact.outlets
          })
          this.$emit('contact-created', data)
        } catch (e) {
          console.error(e)
        }
      })
    },
    async getContact() {
      const result = await API.get('/contacts/' + this.contactId)
      console.log('contact outlets: ', result.data.outlets)
      this.contact = result.data
    },
    async getOutlets() {
      const result = await API.get('/outlets')
      this.outlets = result.data.data
    }
  },
  async mounted() {
    await this.getContact();
    await this.getOutlets();
  }
}
</script>
4

0 回答 0