如何比较两个json的数据并根据结果在vue中显示图标？

Posted 2023-02-23

【中文标题】如何比较两个json的数据并根据结果在vue中显示图标？

【英文标题】：How to compare data of two jsons and display icons according to result in vue?

【发布时间】：2019-12-05 13:14:27

【问题描述】：

我有两个填充了 JSON 数据的数组：generalQuestInfo 和 finishedQuestleafs；来自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: 1
  ,
  
    name: "teleport",
    questId: 1
  ,
  
    name: "take photo",
    questId: 1
  ,
  
    name: "kill",
    questId: 1
  ,
  
    name: "finish",
    questId: 1
  ,
  
    name: "start",
    questId: 2
  
]

其中id 来自generalQuestInfo 等于questId 来自finishedQuestleafs。 在 Vue 应用程序中，我显示带有来自 generalQuestInfo 的数据的表格。 但我需要根据 ID 比较来自 generalQuestInfo pathway.leafs 和 finishedQuestleafs name 的值。如果pahway.leafs 在finishedQuestleafs 中具有相同的ID，那么我需要显示fas fa-check 图标，否则-fas fa-crash。

如何比较generalQuestInfo 和finishedQuestleafs 中的数据并显示正确的图标？我尝试使用两个v-for 指令，但没有成功:(

<table align="center">
    <tr>
      <th>Status</th>
      <th>Path name</th>
      <th>Leafs Info</th>
    </tr>
    <tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'BN' && isActive == 1">
      <td> data.pathway.status </td>
      <td> data.pathway.name </td>
      <td> data.pathway.leafs </td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs
    </tr>
    <tr v-bind:key="data.id" v-for="data in generalQuestInfo" v-if="data.alias == 'SAM' && isActive == 2">
      <td> data.pathway.status </td>
      <td> data.pathway.name </td>      
      <td> data.pathway.leafs </td> //instead of 5 data values here must be 5 icons according to finishedQuestleafs  
    </tr>
    <tr v-else-if="isActive == 3">
      <td>NO INFO</td> 
    </tr> 
  </table>

data() 
  return 
    mainPageInfo: [],
    generalQuestInfo: [],
    finishedQuestleafs: [],
    isActive: 0             
  
,

【参考方案1】：

首先创建一个返回适当图标的方法。我相信getIconClass 方法的代码是不言自明的。然后遍历template 中的leafs 字段并显示叶子的名称和相应的图标。

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>

【讨论】：

虽然这个 sn-p 可能会回答这个问题，但提供有关此代码如何回答问题的额外上下文可以提高它的长期价值。

@adiga，你如何在浏览器中美化我的代码？ （默认tidier 给了我另一个结果），但你的结果更漂亮:)

【参考方案2】：

您可以尝试在 v-for 循环中创建一个检查方法。

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

在你的 vue 对象中（假设你只想检查它是否在数组中：

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;