V-for access and display list

Asked

Viewed 89 times

1

How do I bring Bullets items?

Now I can access the sliders using v-for="item in slider" :key="item.id".

On the part of <ul class="c-list-slider__bullets"> had to bring the Bullets items, as I do to be able to access/bring the items from it? 

"sliders": [{
  "$id": "4",
  "id": "f0914efc-143a-4ca1-be06-0798e0cd7809",
  "hat": "confiança em alta"
  "bullets": [{
      "$id": "5",
      "id": "96b4ffb8-1f39-456c-bb83-31d48226fd92",
      "title": "teste 1"
    },
    {
      "$id": "6",
      "id": "5b19addf-7e65-4c84-b5ea-db2330de64eb",
      "title": "teste 2'"

    }
  ]
}]
<article class="c-list-slider__item materia" v-for="item in slider" :key="item.id">
  <div class="c-list-slider__content">
    <h3><a :href="link" class="c-list-slider__:title" :title="title">{{item.title}}</a></h3>
    <ul class="c-list-slider__bullets">
      <li><a :href="link" :title="title">{{item.title}}</a></li>
    </ul>
  </div>
  <figure>
    <a :href="link" :title="title"><img src="" alt=""></a>
  </figure>
</article>

vue.js
  • 1

    So? You figured it out?

  • 1

    would not be sliders (plural) in the v-for?

  • 1

    @RFL I imagined that she made one v-for="slider in sliders".

  • 1

    Isa, you’re wearing a v-for inside the other?

  • 1

    post an example "functional" than already done, a simplified example that we can run, a MCVE helps us to help it: https://answall.com/help/mcve

  • I decided, thank you very much!!!

Show 1 more comment

1 answer

1


To bring Bullets items, use the v-for

Try this:
(I made minor fixes and changes to your JSON and added the picture)
Online version: https://exemplos.azurewebsites.net/bullets.html

{
  "sliders": [
    {
      "$id": "4",
      "id": "f0914efc-143a-4ca1-be06-0798e0cd7809",
      "hat": "confiança em alta",
      "picture": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Cristo_Redentor_-_Rio_de_Janeiro%2C_Brasil-crop.jpg/290px-Cristo_Redentor_-_Rio_de_Janeiro%2C_Brasil-crop.jpg",
      "bullets": [
        {
          "$id": "5",
          "id": "96b4ffb8-1f39-456c-bb83-31d48226fd92",
          "title": "teste 1"
        },
        {
          "$id": "6",
          "id": "5b19addf-7e65-4c84-b5ea-db2330de64eb",
          "title": "teste 2'"
        }
      ]
    }
  ]
}

HTML:

<html>
    <head>
        <title>Hello World</title>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <!-- development version, includes helpful console warnings -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    </head>
    <body>

    <div id="app">
      {{ message }}

        <article class="c-list-slider__item materia" v-for="slider in sliders" :key="slider.id">
            {{slider.hat}}
            <div class="c-list-slider__content">
                <h3><a :href="slider.link" class="c-list-slider__:title" :title="slider.title">{{slider.title}}</a></h3>
                <ul class="c-list-slider__bullets">
                    <li v-for="bullet in slider.bullets">
                        <a :href="slider.link" :title="slider.title">{{bullet.title}}</a>
                    </li>
                </ul>
            </div>
            <figure>
                <a :href="slider.link" :title="slider.title"><img :src="slider.picture" alt=""></a>
            </figure>
        </article>

    </div>
    <script>
        var app = new Vue({
          el: '#app',
          data: {
            message: 'Hello Vue!',
            sliders: {}
          },

          mounted: function() {
              axios.get('https://exemplos.azurewebsites.net/bullets.json')
                  .then(function (response) {
                    app.sliders = response.data.sliders;
                    console.log(response.data);
                  })
                  .catch(function (error) {
                    alert(error);
                  });

          }
        });
    </script>           
    </body>
</html>

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.