VueJs:如何编辑数组项

Question

简单的Todo-App.请原谅我做一个相当基本的问题的无知.

但是你如何去编辑阵列中的某个项？

通常我会尝试将输入的值绑定到我的数据对象上的新属性,然后在点击Vue的双向数据绑定时将此新属性分配给旧属性.

像这样:http://jsfiddle.net/z7960up7/

在我的情况下,我使用v-repeat指令,它循环我的数据数组但我不能使用v-model指令来使用双向数据绑定,因为如果我这样做,属性的值会被破坏.(见这里:http://jsfiddle.net/doL46etq/2/)

现在我想知道,我将如何更新我的任务数组:

我的想法是通过我的方法单击传递VueObject(this),然后在我的事件处理程序上定义索引,然后使用索引更新tasks数组,如下所示:

HTML:

<input v-el="editInputField" type="text" value="{{ task.body }}" v-on="keyup: doneEdit(this) | key 'enter'"/>

<button v-on="click: editTask(this)">
     Edit
</button>

JS:

methods: {
    editTask: function (task) {
        var taskIndex = this.tasks.indexOf(task.task);

        this.tasks[taskIndex] = {
            'body': document.querySelector('input').value,
            'completed': false
        };

        console.log(task.task.body);
    },
}

这是我的小提琴:

http://jsfiddle.net/doL46etq/3/

但是数据对象根本没有更新,我想知道如何进行更新并更新它.

使用Vue编辑阵列上元素的最佳方法是什么？

编辑:一种简单的方法,就是删除元素,并使用push方法将新元素添加到数组中,但我真的只想更新元素,因为我喜欢让dataobject与我的后端保持同步.

Answer 1

实际上，更新数组项的最简单方法是将任务主体与v-model指令进行双向绑定。

例子：

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>

每当您模糊输入框或按下编辑按钮时，都会触发一个事件。

还可以使用v-class指令用 css 隐藏输入字段。