label-edit
Click to show input text box Vue Component ... inspired by Trello.
Base code by https://github.com/myokyawhtun/label-edit
Pull requests are welcomed on this repo to make this better.
Installation
npm install --save vue-label-edit
Module
Usage
Definition
Props | Description |
---|---|
:text | default value for label edit |
v-on:text-updated-blur | callback function to capture the value changes of the input text when text lost its focus |
v-on:text-updated-enter | callback function to capture the value changes of the input text when user pressed enter |
placeholder | (optional) placeholder for empty label edit value |
name | (optional) unique name/identifier for the label when you want to easily track edit value input from many rendered in page |
Example
Text Box 1 with default text and place holder
<script> name: 'HelloWorld' { return text: 'Click this text!' } components: LabelEdit methods: { thistext = text; } </script>
Or
Text Box 1 with default text and place holder
<script> name: 'HelloWorld' { return text: 'Click this text!' } components: LabelEdit methods: { thistext = text; console; } </script>