如何在不更新可选选项的情况下更新vue-multiselect的模型

我们有以下n个Vue-Multiselect

<b-col
  sm="12"
  v-for="(per,primaryIndex) in form.peopleclone.primaryContacts"
  :key="per.cc_ref"
>
  <b-form-group
    label-cols-sm="2"
    :label="`Contact # ${primaryIndex}`"
    :label-for="`primaryCont-${per.cc_ref}-${primaryIndex}`"
    :attribute="`Contact # ${primaryIndex}`"
    name="per.psname"
    class="align-items-center"
  >
    <multiselect
      :id="`primaryCont-${per.cc_ref}-${primaryIndex}`"
      v-model="form.tempvm.primaryContactvalues[primaryIndex]"
      track-by="ps_ref"
      label="psname"
      :options="contactsList"
      :close-on-select="true"
      :searchable="true"
      :allow-empty="true"
      openDirection="bottom"
      placeholder="Select or Search for a Primary Contact"
      class="rounded"
      @input="assignPrimaryContact(form.tempvm.primaryContactvalues[primaryIndex],primaryIndex)"
    />
  </b-form-group>
</b-col>

选择一个选项后,系统会检查是否已在任何其他多重选择中都选择了该选项,并取决于它是否更新或向用户发送消息。关闭消息框后,系统将尝试将多选模型恢复为原始值。但是,此重置似乎也更改了实际的下拉选项(在这种情况下,即contactsList)。

这里是assignSecCustLeader,这是在input上调用的方法

assignSecCustLeader (value,index) {
  if (value) {
    const leaderExists = this.form.peopleclone.secondaryCustLeaders.some(p => {
      return p.crml_personref === value.ps_ref
    })
    if (!leaderExists) {
      // Update the model
      this.form.peopleclone.secondaryCustLeaders.forEach((p,arrayIndex) => {
        if (arrayIndex === index) {
          p.crml_personref = value.ps_ref
          p.psname = value.psname
        }
      })
    } else {
      this.$bvModal.msgBoxOk(`${value.psname} already exists as a Secondary Customer Leader.
      Please,select another person.`,{
        title: 'Error',size: 'lg',buttonSize: 'md',okVariant: 'danger'
      })
        .then(okValue => {
          if (okValue) {
            // // TODO: Look here
            // const self = this
            // this.form.tempvm.secCustLeaderValues.forEach((p,arrayIndex) => {
            //   if (arrayIndex === index) {
            //     p.crml_personref = self.form.peoplePristine.secondaryCustLeaders[index].crml_personref
            //     p.ps_ref = self.form.peoplePristine.secondaryCustLeaders[index].ps_ref
            //     p.psname = self.form.peoplePristine.secondaryCustLeaders[index].psname
            //   }
            // })
            this.$bvModal.show('edit-firm-crm-people-modal')
          }
        })
        .catch(err => {
          console.error(err)
        })
    }
  } else {
    this.form.peopleclone.secondaryCustLeaders.forEach((p,arrayIndex) => {
      if (arrayIndex === index) {
        p.crml_personref = null
        p.psname = null
      }
    })
  }

有人曾经经历过类似的经历吗?任何帮助将不胜感激。

iCMS 回答:如何在不更新可选选项的情况下更新vue-multiselect的模型

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2196535.html

大家都在问