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