1
votes

Equivalent de @foreach ($ variable as $ key => $ var) dans Vue.js

Comme nous le savons tous, cela fonctionne dans laravel ...

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

... alors que son but ci-dessus est de générer un lien unique pour chaque titre. Ma question est la suivante; Comment vais-je pouvoir faire cela dans Vue.js dans Laravel? Je suis nouveau en vue et j'apprécierais vraiment que vous respectiez ma question. Merci.

laravel vue.js

0 commentaires

3 Réponses :

3
votes

Vue utilise le directive v-for pour créer une boucle.

Contrairement à Blade de Laravel, vous n'entourez pas l'élément avec un mot-clé en boucle (par exemple foreach ). Au lieu de cela, vous mettez le mot clé v-for comme attribut sur l'élément réel qui doit être répété:

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

0 commentaires

1
votes

Cela devrait aider,

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

0 commentaires

0
votes

Cela devrait ressembler à:

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

0 commentaires