[Vuejs]-How to compare data of two jsons and display icons according to result in vue?

by

2👍

✅

First off create a method that will return appropriate icon. I believe the code of getIconClass method is self-explanatory. Then loop through leafs field in template and display name of the leaf and appropriate icon.

new Vue({
  el: "#app",
  data() {
    return {
      generalQuestInfo: [{
        "id": 1,
        "name": "Breaking News",
        "alias": "BN",
        "globalId": 1,
        "platform": "Win64",
        "pathway": {
          "status": "Robot",
          "name": "start case",
          "leafs": ["start", "teleport", "take photo", "kill", "finish"]
        }
      }],
      finishedQuestleafs: [
        { name: "start", questId: 2 },
        { name: "teleport", questId: 1 },
        { name: "take photo", questId: 1 },
        { name: "kill", questId: 1 },
        { name: "finish", questId: 1 },
        { name: "start", questId: 2 }
      ]
    }
  },
  methods: {
    getIconClass(id, leaf) {
      return this.finishedQuestleafs.find(item => item.questId === id && item.name === leaf) ? "fa fa-check" : "fa fa-bomb";
    }
  }
})
.as-console-wrapper { max-height: 100% !important; top: 0; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table align="center">
    <tr>
      <th>Status</th>
      <th>Path name</th>
      <th>Leafs Info</th>
    </tr>
    <tr v-for="data in generalQuestInfo" :key="data.id">
      <td>{{data.pathway.status}}</td>
      <td>{{data.pathway.name}}</td>
      <td>
      <ul>
        <li v-for="(leaf, index) in data.pathway.leafs" :key="index">
          <i :class="getIconClass(data.id, leaf)"></i> {{ leaf }}
        </li>
      </ul>
    </td>
    </tr>
  </table>
</div>
👤Andrew Vasylchuk

1👍

You could try making a method to check while you’re in the v-for loop.

<tr v-for="data in generalQuestInfo">
    <span v-if="hasQuestFinished(data.id, data.pathway.leafs)">
         <!-- display stuff if hasQuestFinished() returned true -->
    </span>
</tr>

And in your vue object (assuming you only want to check if its in the array:

methods:{
   hasQuestFinished(questID, givenQuests){
       finishedQuestleafs.forEach(function(leaf){
          if(leaf.questId == questID && givenQuests.indexOF(leaf.name) >= 0){
              return true;
          }
       });

       //finished the loop without returning means no match
       return false;
   }
}
👤Don Bhrayan Singh

Leave a comment