Vue多选不删除选项

Question

我有一个 vue-multiselect 的工作示例。对于剩下的两个问题，这符合预期。

1. 当您尝试通过单击 x 删除选项时，它实际上会重复该选项，并且永远不会删除它
2. 即使我将 isLoading var 重置为 false，加载微调器也不会消失

示例： https: //codepen.io/TheDevCoder/pen/bGVbGOG

标记

<multiselect
    v-model="value"
    id="ajax"
    label="full_name"
    :options="store"
    :multiple="true"
    :loading="isLoading"
    :internal-search="false"
    @search-change="getData"
    >
</multiselect>

脚本

getData(query){
    this.isLoading = true;
    if(query.length > 0){
        axios.get(`https://api.github.com/search/repositories?q=${escape(query)}`)
            .then((res) => {
                this.store = res.data.items;
                this.isLoading = false;
            })
            .catch((error) => {
                console.log(error);
                this.isLoading = false;
            });
    }
}

Answer 1

回答您的第一个问题

（当您尝试通过单击 x 删除选项时，它实际上会重复该选项，并且永远不会删除它）

你需要指定:track-by="id"//或者你的唯一密钥是什么

Answer 2

正如您已经正确指出的那样，您的代码中有两个不相关的问题。

当您尝试通过单击 x 删除选项时，它实际上会重复该选项，并且永远不会删除它

由于您正在处理多选中的对象，因此必须定义多选可用作 的属性key。然后使用该键来标识要从选择中删除的元素。查看官方文档以获取更多信息。就您而言，您可以采用，id因为它是独一无二的。因此设置track-by多选组件的 prop。

<multiselect
  v-model="value"
  id="ajax"
  label="full_name"
  :options="store"
  :multiple="true"
  :loading="isLoading"
  :internal-search="false"
  @search-change="getData"
  track-by="id"

></multiselect>

即使我将 isLoading var 重置为 false，加载微调器也不会消失

isLoading仅当您输入 if 条件时才重置变量。但是如果您的搜索查询为空会发生什么？因此，您isLoading = true还应该将该语句移至有条件执行的代码中。

getData(query) {
  if (query.length > 0) {
    this.isLoading = true; // TODO: set the loader to true only if you're really searching
    this.queryData = JSON.parse(JSON.stringify(query));
    this.$http
      .get(`https://api.github.com/search/repositories?q=${escape(query)}`)
      .then(res => {
        this.store = res.data.items;
        this.isLoading = false;
      })
      .catch(error => {
        console.log(error);
        this.isLoading = false;
      });
  }
}

您可以查看这个小提琴，它有代码的固定版本： https: //codepen.io/ug27/pen/abvoqjz