Vue JS - Display data if two strings from two different json arrays match

Question

In my Vue JS app I would like to display a div only if two strings match form two different json arrays.

I'm using Axios to get the two different json endpoints combining them into two arrays and displaying the data in a view.

The strings that should match are the following

[
  {
    "info": [
      {
        "uuid": "888"
      }
    ]
  }
]

[
  {
    "postId": "888"
  }
]

I'm posting the uuid in a view using a loop

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

and the post id by

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

My details view

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
      })
  }
}

Would I need a method and a v-if?

@Boussadjra Brahim The info array is nested (object inside object) and the post array is structured more simply, did you need the complete json object? I stripped it down to make it easier to see the only strings I need to match. — M1lls
– M1lls, Commented Apr 6, 2020 at 21:38
please post the relevant parts of the json file and where are you getting them — Boussadjra Brahim
– Boussadjra Brahim, Commented Apr 6, 2020 at 21:45
"I would like to display a div only if two strings match" 👈 what <div>? Given you're dealing with two arrays, it's very unclear what you're trying to do. How are your two template snippets related? — Phil
– Phil, Commented Apr 6, 2020 at 23:35

Dan · Accepted Answer · 2020-04-07 00:25:22Z

2

There are some naming mismatches in your example and we don't know what the route params correlate with. info is not explicitly used anywhere, and it's unclear what layout you are trying for. But here's my guess, assuming that the outer loop represents 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>

edited Apr 7, 2020 at 0:25

answered Apr 6, 2020 at 23:36

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue JS - Display data if two strings from two different json arrays match

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related