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.
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>
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' }
]
}
})
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
]
}
})