elementUI中tree组件节点过滤功能用在循环中报错

Question

用tree组件时使用了节点过滤，整个组件用在循环中报错
<li v-for="item in 3">

    <el-input placeholder="输入关键字进行过滤" v-model="filterText" @input="textCheckNode(filterText)"></el-input>
    <el-tree
        ref="tree"
        class="filter-tree"
        :props="defaultProps"
        :data="data2"
        default-expand-all
        show-checkbox
        :filter-node-method="filterNode">
    </el-tree>
</li>

上述input框因为change事件不生效百度input才生效
下面为改变输入框时的方法
textCheckNode(value){
     self.$refs.tree.filter(value)
 },

在调用时一输入值就报改值is not a function

另外如果我把for循环去掉就不会有问题，但我是必须要循环的，请问各位大佬有遇到过或者有解决办法吗？

Answer 1

你的ref不应该相同,或者指定ref $refs.tree[0]

Answer 2

filter过滤器里面写方法啊，过滤条件。
看看这样能不能解决你的需求
比方说你获取的完整的tree的数据为data2
你的tree的data数据绑定就使用：:data="currentTreeData"

computed: {
    currentTreeData: function () {
        return data2.filter((item) => {
            return item === this.filterText;
        });
    }
}