Почему я не могу получить значение с помощью v-for?

Question

Я хочу получить значения "1999-00" (который является частью свойства stateStats data) с помощью функции xyz(), определенной в вычисляемом свойстве, но я не могу этого сделать.

Кто-нибудь знает об этом?

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['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>

Answer 1

Свойство computed должно быть на том же уровне, что и данные.

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

Answer 2

Вы можете использовать функцию Array map, чтобы получить желаемое свойство из вашего массива объектов.

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>