vue-lazy-input

vue-lazy-input

A Vue.js directive for lazily binding @input events (v-model)

<input type="range" v-model="val" v-lazy-input:debounce="700"/>

Table of contents

• Installation
• What it does
• Syntax
• Example usage

Installation

bundler

npm i --save vue-lazy-input

browser

  <script src="https://unpkg.com/lodash/lodash.min.js"></script><!-- dependency -->
  <script src="https://unpkg.com/vue-lazy-input"></script>

What it does

It wraps existing @input event listeners bound on a custom component or DOM element with either lodash debounce or throttle.

v-lazy-input must be coupled with either a v-model directive or an @input event listener, or both. On its own it does nothing.

Syntax

v-lazy-input:[type]="duration"

type is either debounce, throttle or sync (fires immediately), default is debounce.

duration is a number, default is 500.

Hence v-lazy-input with no type nor duration is equivalent to v-lazy-input:debounce="500"

Example usage

<template>
  <input type="range" v-model="val" v-lazy-input:debounce="700"/>
</template>

<!-- with global registration -->
<script>
import VueLazyInput from 'vue-lazy-input'
import Vue from 'vue'
Vue.use(VueLazyInput)

export default {
  data(){
    return {
      val:42
    }
  }
}
</script>

<!-- with local registration -->
<script>
import {lazyInput} from 'vue-lazy-input'
import Vue from 'vue'

export default {
  data(){
    return {
      val:42
    }
  },
  directives:{
    lazyInput
  }
}
</script>