CODEWITHSUNDEEP
javascriptvue.js
Sofiane
Sofiane

Reputation: 331

V-for vue.js data

Hi am trying to show all array that i have with this example i can show only the first line because [0] i wanna show all 

<div class="description" v-for="item in sitePartVoice[0].part_attributes">
<small><strong>{{item.x_name}}</strong> {{item.x_value}}</small>
</div>

i have try this

<div v-for="item in items">
 <div class="description" v-for="item in sitePartVoice.part_attributes">
    <small><strong>{{item.x_name}}</strong> {{item.x_value}}</small>
    </div>
</div>

No Success thanks

Upvotes: 0

Views: 40

Answers (2)

Sujan Gainju
Sujan Gainju

Reputation: 4769

it should be like

<div v-for="siteParts in sitePartVoice">
 <div class="description" v-for="item in siteParts.part_attributes">
    <small><strong>{{item.x_name}}</strong> {{item.x_value}}</small>
    </div>
</div>

Upvotes: 1

wobsoriano
wobsoriano

Reputation: 13434

Let's say you have this kind of data:

    data: () => ({
      sitePartVoice: [
        { 
            part_attributes: [
                {
                    prop1: 'value1'
                }
            ] 
        },
        { 
            part_attributes: [
                {
                    prop1: 'value1'
                }
            ] 
        }
      ]
    })

then to loop each sitePartVoice and loop the part_attributes inside it:

        <div v-for="item in sitePartVoice">
            <div class="description" v-for="i in item.part_attributes">
                <small>{{i.prop1}}</small>
            </div>
        </div>

Upvotes: 0

Related Questions