无法使用'in'运算符在 null 中搜索'selectedItem'

Question

我有许多微服务，这些微服务由不同的数据库（与SQL和NON-SQL数据库混合）实现。因此，表彼此之间没有物理关系。但是当需要关联时，身份证就会存储在他人中。[请不要问我为什么该系统是这样构建的]到目前为止，一切都很好。现在，我需要有一个选择项目的选择组件。然后，我将所选项目的ID保存在我的工具表中，该工具表已在另一个数据库中实现。

但是，由于我存储了该项目的ID，因此模型仅看到ID，因此它使我看到ID而不是其名称。为此，我再次呼叫数据库，然后将该ID的名称分配为选择组件的模型。每当用户选择另一个项目时，我都会调用setItem（）函数：

setItem(val){
  this.selectedItem = `${val}`;
  querySearchItems(this.selectedItem); //this function simply searches the item.value and brings a list which are printed as options of the select.
}

我的选择组件：

<el-form-item class="el-col-md-5" label="Item" prop="item">
    <el-select  v-model="this.selectedItem" filterable class="sm-column-width" @change="setItem"
        remote placeholder="Please enter a keyword" :remote-method="querySearchItems"
        :loading="loading">
        <el-option v-for="item in listItem" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</el-form-item>

但是，每当用户更改选择框的值时，它就会给我错误的" typeError：byteerror：in operator中的'operator中的'null中的'selectitem'"，我之所以如此，是因为我分配给了选择与我从数据库中获得的选项无关。因此，我需要另一个工作来显示项目的名称并能够更改它。谢谢！

注意：我也使用元素-UI，这就是标签以'el'开头的原因。

Answer 1

我通过在我的选择组件中添加 value-key属性来解决它：

：

 <el-select  v-model="selectedItem" value-key="selectedItem.value" filterable class="sm-column-width"
   remote placeholder="Please enter a keyword" :remote-method="querySearchItems"
   :loading="loading" @change="setItem">
           <el-option v-for="item in listItem" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
 </el-select>

我也将SelectedItem的声明（在数据下）更改为：

...
selectedItem: {label:'' , id: ''}
...

当我查询时，我分配了如下的值：

  this.$http.get('localhost:8080/api/'+'items/' + id)
                  .then((response) => {
                  this.selectedItem = { label: response.body.itemName, value: response.body.id };
              });