0

我在表单中使用 antdv a-select 通过关联表联系人插座编辑联系人和插座之间的多对多关联。表单字段似乎可以识别关联，显示现有关联的标记化输入，例如，如果联系人有 2 个出口，则表示 2 个对象。但是，现有对象是空的，因此在更新时，关联将重置为空。新的关联按预期添加。

以下是表格的相关部分：

<a-form-item :label="`${contact.name}'s Outlets`"
                   :wrapperCol="{lg: {span: 20}, sm: {span: 24} }">
        <a-select
            mode="multiple"
            v-model="contact.outlets"
            :labelInValue="true"
            style="width: 100%"
            placeholder="Please select"
        >
          <a-select-option v-for="outlet in outlets" :key="outlet.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>

这是更新方法：

export default {
  name: 'EditContact',
  data () {
    return {
      form: this.$form.createForm(this),
      contactId: this.$route.params.id,
      contact: {},
      outlets: [],
    }
  },
  methods: {
    // handler
    editContact(e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (err) {
          console.error(err)
          return;
        }
        try {
          if (this.contact.outlets) {
            console.log('outlets input are: ', Object.values(this.contact.outlets))
          }
          const currentOutlets = this.contact.outlets
          console.log('currentOutlets are: ', currentOutlets)
          await API.delete('contact-outlet?contact_id=' + this.contact.id) // delete old array
          for (let i = 0; i < currentOutlets.length; i++) {
            await API.post('contact-outlet', {outlet_id: currentOutlets[i].key, contact_id: this.contact.id})
          }
          console.log('this is the contact to create: ', this.contact)
          let {data} = await API.put('contacts/' + this.contact.id, this.contact)
          this.$emit('contact-updated', data)
          await this.$router.push({ path: `/contacts/${this.contact.id}` })
        } catch (e) {
          console.error(e)
        }
      })
    },
4

0 回答 0