Get only first item from a sublist Vuejs

Asked

Viewed 68 times

2

Well, I’m only trying to return the first item of the sub-array but I’m not getting it, the natural method {{ itens[0].name }} doesn’t work:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="teste">
  <ul>
    <li v-for="conteudos in conteudo">{{conteudos.nome}}
      <ul>
        <li v-for="itens in conteudos.contribuidores">{{itens[0].name}}</li>
      </ul>

    </li>
  </ul>

  <script>
    new Vue({
      el: "#teste",
      data: {
        conteudo: [
          {
            "nome": "Zé",
            "idade": 29,
            "contribuidores": [
              {
                "name": "Jane Doe",
                "phone": "888-555-1212",
                "relationship": "spouse"
              },
              {
                "name": "Justin Doe",
                "phone": "877-123-1212",
                "relationship": "parent"
              }
            ]
          }
        ]
      }
    });
  </script>

vue.js

2 answers

3


The point is what you’re doing v-for the more, when it does v-for="conteudos in conteudo" from there you already have everything you need in countenances:

new Vue({
  el: "#teste",
  data: {
    conteudo: [{
      "nome": "Zé",
      "idade": 29,
      "contribuidores": [{
          "name": "Jane Doe",
          "phone": "888-555-1212",
          "relationship": "spouse"
        },
        {
          "name": "Justin Doe",
          "phone": "877-123-1212",
          "relationship": "parent"
        }
      ]
    }]
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="teste">
  <ul v-for="conteudos in conteudo">
    <li>Nome: {{conteudos.nome}} - Idade: {{conteudos.idade}}
      <ul>
        <li>Nome: {{conteudos.contribuidores[0].name}}</li>
        <li>Tel: {{conteudos.contribuidores[0].phone}}</li>
        <li>Parentesco: {{conteudos.contribuidores[0].relationship}}</li>
      </ul>
    </li>
  </ul>
</div>

Bringing everyone for example:

new Vue({
  el: "#teste",
  data: {
    conteudo: [{
      "nome": "Zé",
      "idade": 29,
      "contribuidores": [{
          "name": "Jane Doe",
          "phone": "888-555-1212",
          "relationship": "spouse"
        },
        {
          "name": "Justin Doe",
          "phone": "877-123-1212",
          "relationship": "parent"
        }
      ]
    }]
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="teste">
  <ul v-for="conteudos in conteudo">
    <li>Nome: {{conteudos.nome}} - Idade: {{conteudos.idade}}
      <ul v-for="dados in conteudos.contribuidores">
        <li>Nome: {{dados.name}}</li>
        <li>Tel: {{dados.phone}}</li>
        <li>Parentesco: {{dados.relationship}}</li> <br>
      </ul>
    </li>
  </ul>
</div>

2

In this case, items is not a list. It represents a single object from a list conteudos..

Try to change the {{items[0]. name}} for {{contributors[0]. name}}

  • items is a list of objects since the foris directed to contributors

  • From what I see in the code, items represents a contributors list object.

  • Iteration 1: items = { "name": "Jane Doe", "phone": "888-555-1212", "Relationship": "spouse" }, Iteration 2: items = { "name": "Justin Doe", "phone": "877-123-1212", "Relationship": "Parent" }

  • soon, items[0] is the first object, and I want the name of that object

  • Items[0] does not exist in this scope. items ta representing a contributing object. ex: var items = contributors[0]

  • Try using this command: {{contributors[0]. name}}

  • Didn’t work no

Show 2 more comments

Browser other questions tagged vue.js

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