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

user_4714661 0
Viewed 3560

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:

prop inspected on vue dev tool

v-for vuejs2 vuex vue.js javascript
1 Answers

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

user_81728570
Related