Spiral's avatar

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"

<table class="table table-bordered table-hover">
  <thead>
    <tr>
       <th>Title</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(product,key) in products.data">
      <td>{{ product.title }}</td>
    </tr>
    <tr class="text-center" v-if="products.data.length <= 0">
      <td colspan="12">No data found</td>
    </tr>
  </tbody>
</table>
0 likes
8 replies
bobbybouwmann's avatar

Well, it seems that products.data is empty. You need to make sure products.data is filled here to perform .lenght. If you probably remove the last <tr> the table is not showing anymore.

How do you assign the data to products.data?

1 like
Spiral's avatar

Thanks @bobbybouwmann bro for replying me

i have pagination on table using vue js pagination plugin and when used paginate from backend that will send response.data.products.data

length property is working but in console getting error length is undefind property

bobbybouwmann's avatar

I find it weird that you have the key products.data. I would expect a key like products. Can you show your VueJS code?

1 like
Spiral's avatar
<template>
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
         <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(product,key) in products.data">
        <td>{{ product.title }}</td>
      </tr>
      <tr class="text-center" v-if="products.data.length <= 0">
        <td colspan="12">No data found</td>
      </tr>
    </tbody>
  </table>
  <pagination :data="products" :limit="1" @pagination-change-page="getResults"></pagination>
</template>
<script>
    export default {
        mounted() {
          this.getResults()
        },
        data(){
            return{
              products:{},
            }
        },
        methods: {
            getResults(page = 1) {
                let _this = this;
                axios.get('/admin/products/index', {
                      params: {
                          page: page,
                      }
                  })
                    .then(response => {
                        _this.products = response.data.products;
                    })
                    .catch(response => {
                        this.errors = response.errors;
                        console.log(response);
                    });
            }
        }
    }
</script>
Spiral's avatar

Thanks bro replying me ..

Working not properly because error is gone but one issue coming when the talblelist have not data then show no data fount but when add the data then also showing no data found below the table after refresh the page then go

Spiral's avatar

Bro i want to say that products.total is working but not proper

when delete all the list in the table show properly but when add one list in the table then still showing in the below of the table but when i refresh the page then remove other wise still below the table

Please or to participate in this conversation.