Почему функция поиска не работает при сравнении двух свойств данных в Vue?

Question

Когда значение Id из stateGDP и rank из statesJson равны друг другу, тогда они должны отображаться как выходные. Но есть некоторая ошибка, которую я не получаю.

var app = new Vue({
  el: "#app",
  data(){
    return {
    statesJson:{
"type": "FeatureCollection",
"features": [{ "rank":"1", "NAME_1": "Andaman and Nicobar"},
             { "rank":"2", "NAME_1": "Rajasthan"},
             { "rank":"3", "NAME_1": "Orissa"}]
    },
    
    stateGDP:[{ "Id":"1", "NAME_1": "Andaman and Nicobar","2000":"48"},
             { "Id":"2", "NAME_1": "Rajasthan","2000":"87"},
             { "Id":"3", "NAME_1": "Orissa","2000":"25"}]
    }
  },
   computed:{ 
    check(){
      let x = this.statesJson.features.map(feature =>{ return feature.rank})
      let stateData = this.stateGDP.find(state => state.Id === x)
      return x
    }
  }
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="state in check">
       {{state}}
    </div>
</div>

Answer 1

Это потому, что карта возвращает массив. Чтобы исправить свой код, все, что вам нужно сделать, это проверить, содержит ли x ваш идентификатор.

var app = new Vue({
  el: "#app",
  data() {
    return {
      statesJson: {
        "type": "FeatureCollection",
        "features": [
          { "rank":"1", "NAME_1": "Andaman and Nicobar"},
          { "rank":"2", "NAME_1": "Rajasthan"},
          { "rank":"3", "NAME_1": "Orissa"},
        ]
      },
    
      stateGDP: [
        { "Id":"1", "NAME_1": "Andaman and Nicobar","2000":"48"},
        { "Id":"2", "NAME_1": "Rajasthan","2000":"87"},
        { "Id":"3", "NAME_1": "Orissa","2000":"25"},
      ],   
    }
  },
  computed:{ 
    check(){
      let state = this.statesJson.features.map(feature => {
        return this.stateGDP.find(state => state.Id === feature.rank);
      });
      
      return state;
    }
  },
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <strong>Total object</strong><hr/>
  <div v-for="state in check">
    {{ state }}
  </div>
  
  <br/>
  
  <strong>Seperate variables</strong><hr/>
  <div v-for="state in check">
    Id = {{ state["Id"] }}<br/>
    Name_1 = {{ state["NAME_1"] }}<br/>
    2000 = {{ state["2000"] }}
  </div>
</div>