vue-autosuggest二次选择时输入框显示[Object object]问题求助

复现步骤 #

• 在输入框输入yogi，选择建议列表中的项，此时<span v-text="form.agen.name_agen" />显示Yogi，输入框显示yogi，一切正常。
• 输入yogiabc（无匹配建议），再通过退格键将内容改回yogi，再次选择建议项时，<span>仍显示Yogi（字符串类型），但输入框显示[object Object]。

相关代码 #

模板代码 #

<b-form-group
  label="Name Agen"
  label-for="vi-agen-name"
>
  <span v-text="form.agen.name_agen" />
  <vue-autosuggest
    id="vi-agen-name"
    v-model="form.agen.name_agen"
    :suggestions="[{ data: form.agen.agens }]"
    :limit="7"
    :input-props="{
      id: 'autosuggest__input',
      class: 'form-control',
      placeholder: 'Name Agen',
    }"
    @selected="onSelectedFrom"
    @input="searchForm($event, 'agen/', 'agen', 'name_agen')"
  >
    <template slot-scope="{suggestion}">
      <span class="my-suggestion-item">{{ suggestion.item.name_agen }}</span>
    </template>
  </vue-autosuggest>
</b-form-group>

方法代码 #

async onSelectedFrom(option) {
  const model = this.form.currentModel
  const fieldSuggest = this.form.currentFieldSuggest
  const currentLoadData = this.form[`${model}`][`${model}s`]

  const currentField = this.form[`${model}`][`${fieldSuggest}`]
  this.form[`${model}`] = {
    isNew: false,
    [`${model}s`]: currentLoadData,
    ...option.item,
  }
  console.log('selected', this.form[`${model}`], 'Name Agen:', currentField)
},
searchForm(keyword, uri, model, currentSuggest) {
  this.form.currentModel = model
  this.form.currentFieldSuggest = currentSuggest
  if (keyword) {
    clearTimeout(this.timeoutDebounce)
    this.timeoutDebounce = setTimeout(() => {
      useJwt.http.get(`${uri}`, { params: { keyword, single_search: true } })
        .then(response => {
          // test debug
          if (response.data.total_items === 0) {
            // no data
            this.form[`${model}`].isNew = true
            this.form[`${model}`].user.full_name = null
            this.form.isAgenAndTrans = false
            this.form[`${model}`][`${model}s`] = []
            console.log('no data show', this.form[`${model}`])
          } else {
            // this.form[`${model}`].isNew = false
            this.form.isAgenAndTrans = false
            this.form[`${model}`][`${model}s`] = response.data[`${model}s`]
          }
        }).catch(e => {
          this.form[`${model}`].isNew = true
          this.form[`${model}`].user.full_name = null
          this.form.isAgenAndTrans = false
          this.form[`${model}`][`${model}s`] = []
        })
    }, 300)
  }
},

Data定义 #

data() {
  return {
    payload: [],
    form: {
      currentModel: '',
      currentFieldSuggest: '',
      isAgenAndTrans: false,
      agen: {
        isNew: true,
        id: 0,
        name_agen: '',
        dm_personal_id: 0,
        user: {
          full_name: '',
        },
        agens: [],
      },
    }
  }
}

问题原因 #

核心问题在于onSelectedFrom方法中直接替换了整个form[model]对象，破坏了Vue的响应式绑定链：

• 第一次选择时，v-model绑定的form.agen.name_agen是字符串类型，渲染正常。
• 输入无匹配内容后，form.agen的引用被后续操作保留；二次选择时，直接替换整个对象导致vue-autosuggest组件内部仍持有原name_agen的旧引用，最终输入框尝试渲染整个对象而非字符串。

解决方案 #

不要直接替换整个对象，改为合并属性到现有对象，同时显式确保绑定字段为字符串类型：

修改onSelectedFrom方法：

async onSelectedFrom(option) {
  const model = this.form.currentModel
  const fieldSuggest = this.form.currentFieldSuggest
  const currentLoadData = this.form[`${model}`][`${model}s`]

  // 合并属性到现有对象，保留响应式绑定
  Object.assign(this.form[model], {
    isNew: false,
    [`${model}s`]: currentLoadData,
    ...option.item,
  })
  
  // 显式设置绑定字段，确保输入框拿到字符串值
  this.form[model][fieldSuggest] = option.item[fieldSuggest]
  
  console.log('selected', this.form[`${model}`], 'Name Agen:', this.form[model][fieldSuggest])
}

同时在searchForm的无数据分支中，添加字段同步逻辑：

if (response.data.total_items === 0) {
  // no data
  this.form[`${model}`].isNew = true
  this.form[`${model}`].user.full_name = null
  this.form.isAgenAndTrans = false
  this.form[`${model}`][`${model}s`] = []
  // 确保绑定字段与输入框内容同步，保持字符串类型
  this.form[`${model}`][fieldSuggest] = keyword
  console.log('no data show', this.form[`${model}`])
}

内容的提问来源于stack exchange，提问作者yogithesymbian