Retrieve data using axios vue.js

Question

I retrieve data using axios in methods created () like this:

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 :

but when trying to check the mounted () function I get empty data what is the cause of this problem?

what I really want is to create a filter, but when using this function the data will not appear :

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

HTML CODE :

<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>

RESULT

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

what causes this function to not work and no detected product data?

Rwd Rwd · Accepted Answer · 2018-08-17T11:05:04

This is because the computed property will potentially be calculated before the response has been returned.

If your data properties are going to be an array then I would suggest defining them as an array from the beginning. In the data object change the properties to something like e.g.

products: [],
productcolors: [],

Alternatively, you can add an additional check to your computed property method:

filteredProduct: function () {

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

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

Retrieve data using axios vue.js

2 Answers