Equivalent of @foreach($variable as $key => $var) in Vue.js

Refresh

April 2019

Views

47 time

1

As we all know, this works in laravel...

<ul>
    @foreach ($titles as $key => $title)
        <li>
            <a href="#">{{ $title }}</a>
            <a href="#">{{ $links[$key] }}</a>
        </li>
    @endforeach
</ul>

...whereas its purpose above is to output a single link for each single title. My question is this; How will I be able to do that in Vue.js in Laravel? I'm new in vue and I'd really appreciate if you respect my question. Thank you.

3 answers

1

This should help,

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>


var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
3

Vue uses the v-for directive to create a loop.

Unlike Laravel's Blade, you don't wrap the element with a looping keyword (i.e. foreach). Instead, you put the keyword v-for as an attribute on the actual element that should be repeated:

<ul>
    <li v-for="(title, key) of titles">
        <a href="#">{{ title }}</a>
        <a href="#">{{ links[key] }}</a>
    </li>
</ul>
0

It should be like:

<ul id="v_table">
  <li v-for="(title, index) in titles">
    {{ title.info }}
    {{ title.name }}
  </li>
</ul>


var vm = new Vue({
  el: '#v_table',
  data: {
    title: [
               @foreach ($titles as $_val )

                    {
                        id: "{{ $_val['id'] }}",
                        info: "{{$_val['info']}}",
                        num: "{{$_val['num']}}",
                    },

               @endforeach
    ]
  }
})