vue-lazy-ref

Easy to get ref even if the element present in async!

This is for vue 2.x

Installing

Using npm:

npm install --save vue-lazy-ref

Using yarn:

yarn add vue-lazy-ref

Usage

vue-lazy-ref can be used as a vue plugin.

As a vue plugin

var Vue = require('vue');
var vLazyRefPlugin = require('vue-lazy-ref');
 
Vue.use(vLazyRefPlugin)

Started

Normal case

<template>
    <div>
        <div ref="test" v-lazy-ref="'test'" />
    </div>
</template>
<script>
export default {
    ...
    methods: {
        async doAction() {
            const el = await this.$getLazyRefs('test');
            // you can get element here
        }
    }
</script>

Async case

<template>
    <div v-if="show">
        <div ref="test" v-lazy-ref="'test'" />
        <button @click="show = !show" />
    </div>
</template>
<script>
export default {
    ...
    data() {
        return {
            show: false
        };
    },
    methods: {
        async doAction() {
             const el = await this.$getLazyRefs('test'); // you can get element here when element is present
        }
    }
</script>

<template>
    <div v-if="show">
        <custom-comp ref="test" v-lazy-ref="'test'" />
        <button @click="show = !show" />
    </div>
</template>
<script>
export default {
    ...
    data() {
        return {
            show: false
        };
    },
    methods: {
        async doAction() {
             const comp = await this.$getLazyRefs('test'); // you can get component here when component is present
        }
    }
</script>

License

MIT