How to iterate throught the values of an array using VueJS?

Question

I am developing with Laravel 5.3 . I am using fractal as well. I also axios as Http Client to perform Ajax Requests.

If i send a get request to display all chairs api. I am returned with the display below:

I am using VueJS 2 to parse the values to the html view.

ChairsController.php

public function index()
{
    $chairs = Chair::paginate(25);
    // Return a collection of $chair with pagination
    return $this->response->withPaginator($chairs, new ChairTransformer());
}

app-vue.js

new Vue({
    el: '#app',
    data: { 
        chairs: []
    },
    mounted() {
        axios.get('http://l5.app:8000/api/v1/chairs').then(response => this.chairs = response.data);
    }
});

getchairs.blade.php

<div id="app">  
    <ul>
        <li v-for="chair in chairs">{{ color }}</li>
    </ul>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="js/app-vue.js"></script>

When i access getchairs.blade.php in the browser, there is error:

2/2
ErrorException in c5c35433.php line 72:
Use of undefined constant color - assumed 'color' (View: /home/vagrant/sites/l5/resources/views/dev/getchairs.blade.php)

How to access the color value and iterate through according to the total number of records? Any help is appreciated.

sevavietl · Accepted Answer · 2016-12-26 08:27:41Z

4

As laravel blade template engine also uses curly braces you have to escape it with @, like this @{{ color }}. This way blade just ignores it and doesn't try to evaluate before vuejs. This applies not only to blade/vuejs situation but, for example, to blade/angular. Read "Blade & JavaScript Frameworks" section from documentation.

answered Dec 26, 2016 at 8:27

sevavietl

3,7921 gold badge16 silver badges21 bronze badges

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

Comments

channasmcs · Accepted Answer · 2016-12-27 06:06:46Z

1

blade & vue js use same syntax to run html in DOM. we have to initialze which is vue & blade. you have use @{{ }} when load vue output on DOM like this

  <div id="app">
     <ul>
      <li v-for="chair in chairs">@{{ color }}</li>
   </ul>
</div>

answered Dec 27, 2016 at 6:06

channasmcs

1,15612 silver badges28 bronze badges

3 Comments

Adrian Over a year ago

If you are able to refresh this page and see the code. Do you know how can i get the color json object and loop throught it?

channasmcs Over a year ago

have you try with Computed Properties in vue vuejs.org/v2/guide/computed.html#Computed-Properties

Adrian Over a year ago

i'm going to check computed properties. thank you sir!

Collectives™ on Stack Overflow

How to iterate throught the values of an array using VueJS?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related