Question

众所周知，这在laravel中有效...

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

...而上面的目的是为每个标题输出一个链接。我的问题是这个；如何在Laravel的Vue.js中做到这一点？我是新手，如果您尊重我的问题，我将不胜感激。谢谢。

Answer 1

Vue使用the v-for directive创建一个循环。

与Laravel的Blade不同，您无需使用循环关键字（即foreach）来包装元素。相反，您将关键字v-for设置为实际元素上应重复的属性：

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

Answer 2

这应该有帮助，

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

Answer 3

应为：

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

在Vue.js中等效于@foreach（$ variable as $ key => $ var）

3 个答案: