In-place Editing Plugin for Vue.js 2

In-place Editing Plugin for Vue.js 2

A vue.js 2 component that adds the inline editing functionality to your elements (e.g. table cells) when clicked.


Build Status

In-place editing for Vue.js 2.

This plugin is still under active development. Do not use in production projects.


  1. Include vue-editable.min.js and vue-editable.min.css from
  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 syntax.

<label v-editable="message">{{ message }}</label> 

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!


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.



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.


    //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.


  • v-for expression do not work overall
  • not pretty at all
  • kinda buggy
  • no tests
  • options missing
  • ES6 compalibity unknown



Github Repository

Tags: #VueJs