https://github.com/cmllr/vue-editable
In-place editing for Vue.js 2.
https://github.com/cmllr/vue-editable
in-place-editor vue vue-editable vue2 x-editable
Last synced: about 2 months ago
JSON representation
In-place editing for Vue.js 2.
- Host: GitHub
- URL: https://github.com/cmllr/vue-editable
- Owner: cmllr
- License: mit
- Created: 2017-04-17T14:25:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-06-06T20:30:59.000Z (almost 8 years ago)
- Last Synced: 2025-03-26T12:21:24.354Z (2 months ago)
- Topics: in-place-editor, vue, vue-editable, vue2, x-editable
- Language: JavaScript
- Homepage:
- Size: 62.5 KB
- Stars: 16
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-editable
[](https://vuejs.org)
[](https://travis-ci.org/cmllr/vue-editable)
In-place editing for Vue.js 2.
> This plugin is still under active development. Do not use in production projects.
## Bootstrap
1. Include `vue-editable.min.js` and `vue-editable.min.css` from https://github.com/cmllr/vue-editable/releases
2. Include the plugin via `Vue.use(editable)`
## Core features
The directive `v-editable=dataMember` is the main directive. The attribute value is a existing property. If `dataMember` is a nested structure, simply use a `foo.bar.barz`-like syntax.
```
{{ message }}
```
### Danger ahead: Iterated edit
If you want to edit objects out of an loop, e. g. `v-for`, you have to inform the library what the given index of the object is.
For this purpose, you can use the `data-index` attribute. Note the `:` just before the attribute's name!
```
:data-index="key"
```
If your array does contain objects, not scalar types (like number or string), you also have to attribute the property which should be edited. For this purpose, you can use the attribute `data-property=name`. Please note: There is no `:` before the attribute name.
```
data-property="customerName"
```
## Attributes
If you want to control the display of the displayed input, e. g. with `input type='number'`, you can do this with the suffix `data-`. E. g. `type` becomes `data-type`, the content remains the same.
## Events
```
vm.$on(name,function(e){
//do something
});
```
|Event-Name|e|
|-|-|
|editable-changed|An object with members `newValue` and `oldValue` (dereferenced)|
|editable-opened|the element which is currently edited|
|editable-aborted|the element which should be edited|
## Type keeping
The library tries to guess the old value type and converts the new value according to the determined type. There is currently not settings for turning this on or off or in case of switching types, e. g. form `int` to `float`.
## Problems
- `v-for` expression do not work overall
- not pretty at all
- kinda buggy
- no tests
- options missing
- ES6 compalibity unknown
## License
MIT