V-for access and display list [closed]

Question

V-for access and display list [closed]

Navigation

#1 by (1 votes)

1

How do I bring bullet items?

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

In the <ul class="c-list-slider__bullets"> part, I had to bring bullet items, how do I get access to / bring 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

asked by anonymous 29.06.2018 / 20:54

1 answer

Trigger gives error with date Problem with parent element overflow affecting the visibility of a child element with "position: absolute"

score 1 · Accepted Answer

To bring bullet items, use the v-for

Try this: (I made minor fixes and changes to your JSON and added picture )
Online version: link

{
  "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><scriptsrc="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>