VueJs: How to Edit an Array Item

The short answer: Use a component in an extended constructor, then pass the index to that component in HTML as property and use computed properties to link back and forth to your data.

But don't be satisfied with just the short answer. Here is the long one:

Situation: I am using your JSFiddle as base for this answer.

in HTML you have:

<td>{{ task.body }}</td>                <td>                    <div>                        <input v-el="editInputField" type="text" value="{{ task.body }}" v-on="keyup: doneEdit(this) | key 'enter'" v-model="newEdit"/>                    </div>                </td>                <td>                    <button v-on="click: editTask(this)" class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">create</i>                    </button>                </td>

We want to replace this code with the component. Using this component allows us to identify the index/row we are working on in your set of data.

<td v-component="listitem" index="{{$index}}"></td>

Next step: defining the component.

In order not to cloud our instance with the component, we will create a separate constructor for the vue object, so we can assign the new element to our new object.

This is done using extend.

window.newVue =  Vue.extend({components:{    'listitem': {        props: ['index'],        computed: {        // both get and set        body: {          get: function () {            return this.$parent.tasks[this.index].body;          },          set: function (v) {            this.$parent.tasks[this.index].body = v          }        }      },        template: '<td>{{ body }}</td><td><div><input type="text" v-model="body" value="{{ body }}"/></div></td><td></td>',    }}

});

Since we can't define our data properly using an extend, we'll just assume the data already exists while writing the component.

Step 3: defining the actual data:Instead of using Vue as our object constructor, we'll now use our newly created instantiator.

new newVue({el: '#todoapp',data: {    tasks: [{        'body': 'Eat breakfast',        'completed': false    }, {        'body': 'Drink milk',        'completed': false    }, {        'body': 'Go to the store',        'completed': false    }],    newTask: '',},

});

That's it!

In case you couldn't follow what happened: Here's the Fiddle!

PS: More information about the working of these code can be found on vuejs.org

Actually the simplest way to update an array item, is to two-way bind the task body with the v-model directive.

Example:

http://jsfiddle.net/z7960up7/2/

<div id="demo">    {{ message }}    <div class="edit">        <input type="text" v-model="message">                 <button v-on="click: editMessage">Edit</button>    </div>            <pre>{{ $data | json }}</pre></div>

And fire an event whenever you blur out of the input box or the edit button is hit.

Also hide the input field with css, by using the v-class directive.