CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuexv-for
fuad makarim
fuad makarim

Reputation: 73

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

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

Upvotes: 2

Views: 5031

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

Upvotes: 4

Related Questions