Vue JS - 如果来自两个不同 json 数组的两个字符串匹配，则显示数据

Posted 2023-02-16

【中文标题】Vue JS - 如果来自两个不同 json 数组的两个字符串匹配，则显示数据

【英文标题】：Vue JS - Display data if two strings from two different json arrays match

【发布时间】：2020-07-19 00:08:02

【问题描述】：

在我的 Vue JS 应用程序中，我希望仅当两个字符串匹配来自两个不同的 json 数组时才显示一个 div。

我正在使用 Axios 获取两个不同的 json 端点，将它们组合成两个数组并在视图中显示数据。

应该匹配的字符串如下

[
  
    "info": [
      
        "uuid": "888"
      
    ]
  
]

[
  
    "postId": "888"
  
]

我正在使用循环在视图中发布 uuid

<div v-for="posts in $route.params.post.postdata" :key="post.uuid">
<p> post.uuid </p>
</div>

和

的帖子ID

<div v-for="special in specials" :key="special.postId">
<p> special.postId </p>

我的详细信息视图

export default 
  data () 
    return 
      loading: false
    
  ,

  computed: 
    specials () 
      return this.$store.state.specials
    
  ,

  created () 
    this.loading = true
    this.$store.dispatch('fetchPosts')
      .then(specials => 
        this.loading = false
      )
  

我需要一个方法和一个v-if吗？

【问题讨论】：

请提供有关 2 个数组的更多详细信息

@Boussadjra Brahim info 数组是嵌套的（object inside object），post 数组的结构更简单，你需要完整的 json 对象吗？我将其剥离，以便更轻松地查看我需要匹配的唯一字符串。

请发布 json 文件的相关部分以及您从哪里获得它们

“我只想在两个字符串匹配时显示一个 div” ????什么<div>？鉴于您正在处理两个数组，因此非常不清楚您要做什么。你的两个模板 sn-ps 有什么关系？

【参考方案1】：

您的示例中有一些命名不匹配，我们不知道路由参数与什么相关联。 info 没有在任何地方明确使用，也不清楚您正在尝试什么布局。但这是我的猜测，假设外循环代表info

<div v-for="post in $route.params.post.postdata" :key="post.uuid">
    post.uuid 
   <template v-for="special in specials">
      <p v-if="post.uuid == special.postId"> special </p>
   </template>
</div>