select 多选 搜索 选择一项之后再输入报错: 'Maximum recursive updates exceeded' #3044
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
2.0.0-beta.10
Environment
vue 3.0.1
Reproduction link
Steps to reproduce
my code is as below:
<template>
<Select
class="selector"
mode="multiple"
label-in-value
v-model:value="value"
placeholder="Select users"
:filter-option="false"
@search="search"
>
<Select.Option v-for="d in data" :key="d.id">
<img class="avatar" :src="d.avatar" alt="" />
{{ d.name }}
</Select.Option>
</Select>
</template>
<script>
import { defineComponent } from "vue";
import { Select } from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
export default defineComponent({
name: "Selector",
components: { Select },
props: {
list: {
type: Array,
required: true,
},
},
data() {
return {
data: this.list,
value: [],
};
},
methods: {
search(value) {
console.log("fetching user", value);
this.data = [];
this.data = this.filterList(value);
},
filterList(value) {
return value === ""
? this.list
: this.list.filter(
(item) =>
item.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
);
},
},
});
</script>
<style scoped>
.selector {
width: 200px;
}
.avatar {
width: 15px;
height: 15px;
border-radius: 50%;
object-fit: cover;
}
</style>
What is expected?
选择后再次输入正常显示，不报错
What is actually happening?
选择后再次输入显示异常，且报错：'Uncaught (in promise) Error: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.'
另外，在codesandbox中的代码不知道为什么报了这个错误：Warning: the children of Selectshould beSelect.OptionorSelect.OptGroup,，所以我把代码贴在上面了