How to properly v-if and v-for nested object vue js

Question

I cannot render nested object content with v-for, there is a prop which contain object, but the div didn't show when i do v-if="prop". Please help how to solve it. Here is the syntax that i used for render:

<div v-if="statisticBrandBrowsers && statisticBrandBrowsers.length">
  <div v-for="(item, index) in statisticBrandBrowsers">
    <div>View: {{item.page_view.hits}}</div>
  </div>
</div>

My Props:

Your statisticBrandBrowsers is an object instead of array so statisticBrandBrowsers.length is invalid. Better to have it as an array of browsers. Eg: statisticBrandBrowsers = [{browser: 'Chrome', conversion: {}, page_view: {}}]. Then you don't have to access the index as well. — lthh89vt
– lthh89vt, Commented Jan 10, 2019 at 5:42

Boussadjra Brahim · Accepted Answer · 2019-01-10 01:05:28Z

4

The problem is inside the conditional rendering not inside v-for loop because the objects don't have a property called length, so you should do something like :

<div v-if="statisticBrandBrowsers && Object.values(statisticBrandBrowsers).length">

Object.values(statisticBrandBrowsers) will give you an array which has length property

answered Jan 10, 2019 at 1:05

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to properly v-if and v-for nested object vue js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related