vue-editable-element

#Installation

#NPM

npm i vue-editable-element -S

Usage As plugin

import Vue from 'vue'
import VueEditableElement from 'vue-editable-element'

Vue.use(VueEditableElement)

<template>
    <div>
		<vue-editable-element 
	    	:text="'aaaaaaaaaaaaaaaaa'"
	    	:cssclass="'w-full t-input t-input-size-default t-input-status-default border block rounded p-2 bg-white'"
	    	:textarea='true'
	    	@textupdatedblur="updatedesc"
	    >
	    </vue-editable-element>
    </div>
</template>

<script>
    export default {
        methods:{
        	updatedesc(data){
        		console.log(data)
        	}
        }
    }
</script>

Available props

The component accepts these props:

| Attribute | Type | Default | Description | | :--- | :---: | :---: | :--- | | text | String | :---: | Set the value you want to edit | placeholder | String | :---: | Set label value
| textarea | Boolean | false | if you want to use textarea use true; | | cssclass | type | `` | css class for design the input element |

Available $emmit

The component send $emmit event to update date to api: ( textupdatedblur ) the emmit occer when the input date is update so you can catch data from parent component to update the data