我在 created() 方法中使用 axios 检索数据，如下所示：

data() {
    return {
        filterBox: false,
        color: [],
        sortBy: null,
        productType: [],
        products: null,
        productcolors: null,
        categories: null,
        active_el: 0,
        isActive: false,
        categories: null,
        inputSearch: '',
    }
},

created() {
    axios.get('/admin/product_index_vue').then(response => {
        this.products = response.data.products.data;
        this.productcolors = response.data.productcolors;
        this.categories = response.data.categories;
        console.log(this.products.length);
    }).catch((error) => {
        alert("ERROR !!");
    });
},

when checking using console.log the data is there :

Vue DevTools：

但是当尝试检查 mounted() 函数时，我得到了空数据 这个问题的原因是什么？

我真正想要的是创建一个过滤器，但使用此功能时数据不会出现：

computed: {
    filteredProduct: function () {
        if (this.products.length > 0) {
            return this.products.filter((item) => {
                return (this.inputSearch.length === 0 || item.name.includes(this.inputSearch));
            });
        }
    }
},

HTML代码：

<tr v-for="product in filteredProduct">
    <td style="width:20px;">{{product.id}}</td>
    <td class="table-img-product">
        <img class="img-fluid" alt="IMG">
    </td>
    <td> {{ product.name }}</td>
    <td style="display:none">{{product.product_code}}</td>
    <td>{{ product.base_color }}</td>
    <td>{{ product.category }}</td>
    <td>{{ product.price }}</td>
    <td>{{ product.stock }}</td>
    <td>{{ product.status }}</td>
    <td>
        <button type="button" name="button" v-on:click="deleteProduct(product.id,product.product_color_id)">
            <i class="fas fa-trash"></i>
        </button>
    </td>
</tr>

结果

app.js:36719 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null"

found in

---> at resources\assets\js\components\products\Product_index.vue

什么原因导致此功能不起作用并且没有检测到产品数据？