VueJS Computed 中的多个过滤器？答案

【问题标题】：Multiple filter inside VueJS Computed?VueJS Computed 中的多个过滤器？
【发布时间】：2021-08-12 09:36:34
【问题描述】：

这段代码不起作用，当我尝试在计算中添加另一个过滤器时它不起作用，如果我删除它，代码就可以正常工作。

我正在尝试将公司和产品搜索放在一个页面上，如果删除产品过滤器，公司过滤器可以正常工作。

    new Vue({
        el: '#app',
        data () {
            return {
            info: [],
            products: [],
            search: '',
            prosearch: ''
            }
        },
        mounted () {
            axios
            .get(`${URL}/api/`)
            .then(response => (this.info = response.data))

             axios
            .get(`${URL}/api/`)
            .then(response => (this.products = response.data))
        },
        computed:{
            filterdata: function(){
                return this.info.filter((info)=>{
                    return info.name.match(this.search)
                });
            },
            Anotherfilterdata: function(){
                return this.products.filter((product)=>{
                    return product.name.match(this.prosearch)
                });
            },
        }
})

【问题讨论】：

你调用同一个端点两次
不，我删除了端点。两者都不一样
产品过滤器是否有效？当公司过滤器“不起作用”时，浏览器开发人员工具中是否有任何迹象表明问题可能是什么？ “不起作用”是什么意思？一切都过滤了吗？没有过滤？
@Bravo 不，过滤器不起作用。当添加两个过滤器时，如果产品过滤器被删除，那么公司过滤器将起作用。添加两个过滤器后，它会显示“ReferenceError: products is not defined。”
你能显示模板吗，它在哪里使用filterdata 和Anotherfilterdata - 因为我只是用一个简单的模板来模拟你的代码，它工作得很好

标签： javascript vue.js filter vuejs2 vue-component

【解决方案1】：

所以我用模拟数据运行了你的代码，它工作得很好。这意味着您的计算属性没有问题，但从 API 获取数据。

查看Link

既然你没有添加任何错误，让我分解一下情况。您正在从挂载的 API 中获取数据，此时标记已呈现，但您在产品和信息数组中没有数据，因为 Axios 尚未解决承诺。因此，当您尝试使用 Anotherfilterdata 或 filterdata 或两者时，其中一个此时没有数据，因此会破坏代码。

我建议你检查你的控制台，一定有一些与我上面描述的有关的错误。

【讨论】：