VueJS component not rendering data from database?

Question

I am learning VueJS and using it with laravel 5.4. I am familiar with laravel. The problem I am having is displaying data from database in Vue components. Data is being retrieved successfully from the server. I cannot see this when I print retrieved data in the browser console. But it cannot be displayed in the view. the v-for directive is running just fine and I can see the edit button accompanied by each raw printed on each loop. However values from data base are blank. Here is my displayCategory.vue component.

<template>
    <div>
        <h3>Orders</h3>
               <div class="row">
          <div class="col-md-10"></div>
          <div class="col-md-2">
            <router-link :to="{ name: 'create-product-category'}" class="btn btn-primary">Add Category</router-link>
          </div>
        </div><br />

        <table class="table table-hover table-striped table-responsive">
            <thead>
            <tr>
                <td>Category Name</td>
                <td>Description</td>

                 <td>Actions</td>
            </tr>
            </thead>

            <tbody>
                <tr v-for="category in categories">
                    <td>{{ category.category_name }}</td>
                    <td>{{ category.description }}</td>
                    td><router-link :to="{name: 'edit-product-category', params: { id: category.id }}" class="btn btn-primary">Edit</router-link></td>                    
                    <td><button class="btn btn-danger" v-on:click="deleteCategory(category.id)">Delete</button></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script>

    export default {
        name:'list-product-categories',
        data(){
            return{
                categories: []
            }
        },

        created: function()
        {
            this.fetchCategories();
        },

        methods: {
            fetchCategories()
            {
              let uri = '/api/product/categories';
              this.axios.get(uri).then((response) => {
                  this.categories = response.data;
                  console.log(this.categories);
              });
            },
            deleteCategory(id)
            {
              let uri = 'http://localhost/dms/public/api/products/categories/${id}';
              this.categories.splice(id, 1);
              this.axios.delete(uri);
            }
        }
    }
</script>

Other areas of the app is working normally as I can save records to the server and load input form components. Please assist.

There is an error in your HTML td><router-link ..

connexo
– connexo

2018-02-25 13:03:46 +00:00
Commented Feb 25, 2018 at 13:03 — connexo
– connexo, Commented Feb 25, 2018 at 13:03

AlexSashaRegan · Accepted Answer · 2018-02-25 22:42:16Z

2

You might need to provide a unique key to each table row. If you're db records have an id, use that.

<try v-for="c in categories" :key="c.id" />

Update I noticed a syntax error in the html when I pasted it into my editor. There was a dangling td tag.

<template>
  <div>
    <h3>Orders</h3>
    <div class="row">
      <div class="col-md-10"></div>
      <div class="col-md-2">
        <router-link :to="{ name: 'create-product-category'}"
                    class="btn btn-primary">Add Category</router-link>
      </div>
    </div><br />

    <table class="table table-hover table-striped table-responsive">
      <thead>
        <tr>
          <td>Category Name</td>
          <td>Description</td>

          <td>Actions</td>
        </tr>
      </thead>

      <tbody>
        <tr v-for="category in categories"
            :key="category.id">
          <td>{{ category.category_name }}</td>
          <td>{{ category.description }}</td>
          <router-link :to="{name: 'edit-product-category', params: { id: category.id }}"
                      class="btn btn-primary">Edit</router-link>
          </td>
          <td>
            <button class="btn btn-danger"
                    v-on:click="deleteCategory(category.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
export default {
  name: "list-product-categories",
  data() {
    return {
      categories: [],
    };
  },

  created: function() {
    this.fetchCategories();
  },

  methods: {
    fetchCategories() {
      let uri = "/api/product/categories";
      this.axios.get(uri).then(response => {
        this.categories = response.data;
        console.log(this.categories);
      });
    },
    deleteCategory(id) {
      let uri = "http://localhost/dms/public/api/products/categories/${id}";
      this.categories.splice(id, 1);
      this.axios.delete(uri);
    },
  },
};
</script>

This is my console output:

[{"id":1,"asset_category":"LB01","class_id":1,"description":"Land & Buildings","created_at":"2018-02-11 16:25:26","updated_at":"2018-02-11 16:25:26"},{"id":2,"asset_category":"PE01","class_id":2,"description":"Plan & Equipment","created_at":"2018-02-11 16:25:26","updated_at":"2018-02-11 16:25:26"},{"id":3,"asset_category":"CE01","class_id":3,"description":"Computer Equipment","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":4,"asset_category":"OE01","class_id":4,"description":"Office Equipment","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":5,"asset_category":"FF01","class_id":5,"description":"Furniture & Fixtures","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":6,"asset_category":"MV01","class_id":6,"description":"Motor Vehicles","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":7,"asset_category":"CS01","class_id":7,"description":"Computer Software","created_at":"2018-02-11 16:25:27","updated_at":"2018-02-11 16:25:27"},{"id":8,"asset_category":"Sample Category","class_id":1,"description":"Sample fixed asset category","created_at":"2018-02-24 13:05:07","updated_at":"2018-02-24 13:05:07"},{"id":9,"asset_category":"Furniture","class_id":2,"description":"Wooden assets such as chairs and tables","created_at":"2018-02-24 13:06:39","updated_at":"2018-02-24 13:06:39"}]

Working Fiddle Example https://jsfiddle.net/alexsasharegan/cdmg789u/25/

edited Feb 25, 2018 at 22:42

answered Feb 25, 2018 at 2:40

AlexSashaRegan

3414 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

connexo Over a year ago

Afaik this is even required.

wafutech Over a year ago

Thank for for the answer @AlexSashaReganm but still does not work. I just dont figure why data is showing up in the console but blank rows in browser.

AlexSashaRegan Over a year ago

Can you make a fiddle or codepen example? Anything i csn inspect on my end?

AlexSashaRegan Over a year ago

@wafutech, I updated my answer. I found a small syntax error that would blow up the vue template compiler.

wafutech Over a year ago

Sure. But in my end I prove checked and the code is compiling just fine. Even after pasting your code I still on the same results. Blank loop. Output in console is an indication that code is compiling. I updated my post with console output.

|

wafutech · Accepted Answer · 2018-04-10 07:42:32Z

0

Thank you guys for trying to help me out. Though all these solutions did not work for me.

I changed the database and it worked. I didn't even touch my front end code. I think there was a problem with my database I could not tell exactly why. I changed the database from my SQL and it worked. Hope points someone somewhere. I had tried to reinstall vue and do whatever updates but didn't make it work.

answered Apr 10, 2018 at 7:42

wafutech

55111 silver badges35 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 02:21:42Z

0

I see that you are using v-repeat in fact is deprecated, you need to implement v-for instead of v-repeat. I think it will solve your problem :)

By the way, have a look here for more informations about List Rendering and v-for: https://v2.vuejs.org/v2/guide/list.html

edited Jul 15, 2022 at 2:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 24, 2018 at 18:34

Thomas Brd

1,2739 silver badges11 bronze badges

4 Comments

wafutech Over a year ago

Oh sorry, I have been using v-for and just tried v-repeat. Both are not working. I have updated the post. Thank you for pointing this out.

Thomas Brd Over a year ago

@wafutech can you post some of your API returned data ? the result of the console.log(this.categories) for example

wafutech Over a year ago

I have updated the code with console output. Thanks.

wafutech Over a year ago

I have create a new laravel project and had to setup vue afresh only to end up with the same results. This is embarrassing. It seems I would not find a solution for this. Otherwise thank you guys for trying to pull me out of this deep stuck. Hope I will solve it someday.

Collectives™ on Stack Overflow

VueJS component not rendering data from database?

3 Answers 3

11 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related