[Vuejs]-Why I am unable to get the value using v-for?

by

1👍

✅

You can use Array map function to get the desired property out of your array of objects.

var app = new Vue({
  el: "#app",
  data(){
    return {
    stateStats : [{"State":"Andaman & Nicobar Islands","1999-00":"45"},
                             {"State":"Andhra Pradesh","1999-00":"27"},
                             {"State":"Arunachal Pradesh","1999-00":"9"}]
            }
        },
    computed:{
        xyz(){
          return this.stateStats.map(state => state["1999-00"]);
        }
    }
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="x in xyz">
{{x}}
</div>
</div>
👤s4k1b

2👍

The computed property should be the same level as data. 

var app = new Vue({
  el: "#app",
  data(){
     return {/* whatever */}
  },
  computed : {
        xyz(){
          return this.stateStats.map( s => s['1999-00']);
        }
    }
});
👤HW Siew

Leave a comment