How to iterate over array values ​​using VueJS?

Question

I am developing with Laravel 5.3. I also use fractal. I am also an axionist as an Http Client to execute Ajax requests.

If I send a request to receive all api chairs to display. I am back with the display below:

I am using VueJS 2 to parse values ​​in an 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());
}

application-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/vue@2.1.6/dist/vue.js"></script>
<script src="js/app-vue.js"></script>

When I access getchairs.blade.php in a browser, an error occurs:

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 according to the total number of records? Any help is appreciated.

Answer 1

, @, @{{ color }}. , vuejs. /vuejs, , , /angular. Blade and JavaScript Frameworks .

Answer 2

blade vue js html DOM. vue blade. @{{ }}, VUE DOM,

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