CODEWITHSUNDEEP
javascriptvue.jsv-for
scopeak
scopeak

Reputation: 545

Return single result from v-for based on key value

I have a v-for loop to display a single result at a time based on the selected :key from another data value counter. While this works great, the problem lies with adding <transitions> when the value updates, causing both to appear briefly and jump about the page while the previous item transition disappears.

From what I can see, the issue is that all the tag results are still there on the DOM from the v-for and simply transitioning between the two.

Is there a better way to achieve this so only the {{tag}} values are updated based on the key?

<div v-for="tag in tags" :key="tag.id">
     <transition name="fade">
      <div v-if="tag.id == counter">
        <div class="tag-col--prod-img mb-4">
          <img class="img-fluid" :src="tag.thumb" />
        </div>
        <h5 class="mb-5">{{tag.heading}}</h5>
        <div class="mb-3">
          <h1>{{ tag.title }}</h1>
        </div>
        <h2 class="mb-3">{{ tag.price }}</h2>
        <p class="mb-4">
          {{tag.detail}}
        </p>
        <a :href="tag.link" target="_blank">
          <button class="btn btn-primary">View product</button>
        </a>
       </div>
      </transition>
</div>

Upvotes: 1

Views: 230

Answers (1)

bernie
bernie

Reputation: 10390

Here's how to do it and take advantage of Vue's computed properties:

<transition name="fade">
  <h5 class="mb-5">{{activeTag.heading}}</h5>
  <!-- The rest -->
</transition>

Add this to your component:

computed: {
  activeTag() {
    return this.tags.find(({ id }) => id === this.counter);
  }
}

activeTag will be reevaluated each time tags or counter changes, causing an update to the DOM elements referencing activeTag's properties.

Upvotes: 2

Related Questions