[Vuejs]-Performance concern accessing $refs in Vue JS to pull data

by

0👍

One thing would be to move the loop into a template instead of the div. I think they’re all rendering and then being removed because you’re looping and using a conditional on the same element.

<template v-for="(url, index) in urlsList>
    <div :key="url.id" v-if="slug === url.slug">
    ...
</template>

But, since you’re wanting to reference the item that is displayed, I would move the loop into a function and only have the one that’s displayed in the template.

<div>
  <div class="is-hidden">
    <div>{{ index }}</div>
    <div>{{ display.item }}</div>
    <div>{{ display.anotherItem }}</div>
    <div>{{ display.foo }}</div>
    <div>{{ display.bar }}</div>
    <div>{{ display.apple }}</div>
    <div>{{ display.cake }}</div>
    <div>{{ display.laravel }}</div>
    <div>{{ display.vue }}</div>
    <div>{{ display.test }}</div>
    <div>{{ display.notification }}</div>
    <div>{{ display.item2 }}</div>
    <div>{{ display.item3 }}</div>
  </div>
</div>
...
computed: {
    index() {
        for (url, index) in this.urlsList {
            if (url.slug === this.slug) {
                return index;
            }
        }
    },
    display() {
        return this.urlsList[this.index];
    }
}
...
methods {
    // this.display.anotherItem
}

I haven’t tried it, so don’t know if the code works as-is, but that’s the basic idea.

If it’s possible for there to be more than one to display, change index() and display() to return lists. Same idea, though.

Leave a comment