使用 axios vue.js 检索数据

Question

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

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 !!");
    });
},

使用 console.log 检查数据时：

Vue 开发工具：

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

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

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 警告]：渲染错误：“TypeError：无法读取 属性“长度”为 null"

发现于

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

是什么原因导致此功能无法正常工作且未检测到产品数据？

Answer 1

这是因为计算属性可能会在返回响应之前计算出来。

如果您的数据属性将是一个数组，那么我建议从一开始就将它们定义为一个数组。在数据对象中，将属性更改为例如

products: [],
productcolors: [],

或者，您可以在计算属性方法中添加额外的检查：

filteredProduct: function () {

    if (!this.products) {
        return [];
    }

    return this.products.filter((item) => {
        return (this.inputSearch.length === 0 || item.name.includes(this.inputSearch));
    });
}

Answer 2

这是 axios 响应的 ont 措辞

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