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

Question

我有许多微服务，它们是由不同的数据库实现的(与 SQL 和非 SQL 数据库混合)。因此，表之间没有物理关系。但当需要关联时，ID 会存储在其他 ID 中。 [请不要问我为什么系统是这样构建的]到目前为止一切都很好。现在我需要一个选择组件来从中选择项目。然后我将所选项目的 id 保存在我的工具表中，该表是在另一个数据库中实现的。

但是因为我存储了项目的 ID，所以模型只能看到 ID，因此它让我看到 ID 而不是其名称。为此，我对数据库进行了另一次 get 调用，并将该 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:无法使用 'in' 运算符在 null 中搜索 'selectedItem'”，我猜测是因为我分配给select 与我从数据库获取的选项无关。因此，我需要另一种解决方法来显示项目的名称并能够更改它。谢谢!

注意:我也使用 element-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 };
              });