In-place editing with native HTML inputs
npm install vue-quick-edit> In-place editing with native HTML inputs. Inspired by x-editable
   
``shell`
$ npm install --save vue-quick-edit
Global include
`
import QuickEdit from 'vue-quick-edit';
Vue.component('quick-edit', QuickEdit);
`
Local include
`
import QuickEdit from 'vue-quick-edit';
export default {
components: { QuickEdit },
};
`
`html`
Name | Type | Default | Description
--- | --- | --- | ---
buttonCancelText | String | Cancel | The text on the Cancel button.
buttonOkText | String | Ok | The text on the Ok button.
booleanYesText | String | Yes | The text for true when you configure type="boolean".false
booleanNoText | String | No | The text for when you configure type="boolean"v-model
classes | Object | See Description | buttonCancel: 'vue-quick-edit__button--cancel'
buttonOk: 'vue-quick-edit__button--ok'
buttons: 'vue-quick-edit__buttons'
input: 'vue-quick-edit__input'
link: 'vue-quick-edit__link'
isClickable: 'vue-quick-edit__link--is-clickable'
isEmpty: 'vue-quick-edit__link--is-empty'
isRequired: 'vue-quick-edit__link--is-required'
wrapper: 'vue-quick-edit'
emptyText | String | Empty | The text to display when there is a falsy value in the directive.values.join(', ')
formatMultiple | Function | | Specify a callback to format the array for a select, checkbox or radio type.select
options | Array | [] | The options to display for a , checkbox or radio type. This can be an array of strings or an array of objects with text & value (& disabled) as properties.''
placeholderValue | String | | When you pass a placeholder to a select it will display the placeholder as the first default option, you can set the value of this option with placeholderValue.false
showButtons | Boolean | true | Hide the buttons by setting this to .true
startOpen | Boolean | false | Set to if you want to start in edit mode.input
type | String | input | This can be , textarea, select, checkbox, radio, boolean or any other type you can pass to input.''
validator | Function | null | Specify a callback to describe why the input is invalid.
v-model | String, Array, Boolean, Number | | Usually a string, for checkbox or select[multiple] use an array.
| The display value. Available slot props value and raw-value.
button-ok | {{ buttonOkText }} | A slot to use HTML as a the Ok button text, useful for FontAwesome.
button-cancel | {{ buttonCancelText }} | A slot to use HTML as the Cancel button text, useful for FontAwesome.
prepend | | Prepend HTML before the display text
append | | Append HTML after the display textTheming
$3
For example just override this class in your style
`css
.vue-quick-edit__link--is-clickable {
color: #BADA55;
}
`$3
Set up the classes for the corresponding elements in
data
`js
vueQuickEditClasses: {
wrapper: 'form-group form-inline',
input: 'form-control input-sm',
buttons: 'btn-group btn-group-sm',
buttonOk: 'btn btn-primary',
buttonCancel: 'btn btn-link',
},
`Maybe add specific overrides for bootstrap
`html
`Use it like this
`html
``- Github for hosting
- NPM for hosting
- Travis CI for the service
- Shields.io for the badges