javascript - VueJS : How to Edit an Array Item

Question

简单的 Todo 应用程序。请原谅我的无知提出了一个相当基本的问题。

但是您将如何着手编辑数组中的某个项目？

通常我会尝试将我的输入值绑定(bind)到我的数据对象上的一个新属性，然后通过 Vue 的双向数据绑定(bind)将这个新属性分配给点击时的旧属性。

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

在我的例子中，我使用 v-repeat 指令，它循环遍历我的数据数组，但我不能使用 v-model 指令来使用双向数据绑定(bind)，因为如果我这样做，属性的值会被破坏所以。 (参见此处:http://jsfiddle.net/doL46etq/2/)

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

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

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);
    },
}

这是我的 fiddle :

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

但是数据对象根本没有更新，我想知道我将如何着手更新它。

使用 Vue 编辑数组中元素的最佳方法是什么？

编辑:一种简单的方法，就是删除元素，然后使用 push 方法将新元素添加到数组中，但我真的只想更新元素，因为我喜欢让数据对象与我的后端。

Answer 1

简短的回答:在扩展构造函数中使用一个组件，然后在 HTML 中将索引作为属性传递给该组件，并使用计算属性来回链接到您的数据。

但不要只满足于简短的回答。这是长篇:

情况:我正在使用你的JSFiddle作为这个答案的基础。

在 HTML 中你有:

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

我们想用组件替换这段代码。使用此组件，我们可以识别我们在您的数据集中处理的索引/行。

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

下一步:定义组件。

为了不混淆我们的实例和组件，我们将为 vue 对象创建一个单独的构造函数，这样我们就可以将新元素分配给我们的新对象。

这是使用 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>',
    }
}

});

由于我们无法使用扩展正确定义我们的数据，我们将假设在编写组件时数据已经存在。

第 3 步:定义实际数据:我们现在不使用 Vue 作为我们的对象构造函数，而是使用我们新创建的实例化器。

new newVue({
el: '#todoapp',

data: {
    tasks: [{
        'body': 'Eat breakfast',
        'completed': false
    }, {
        'body': 'Drink milk',
        'completed': false
    }, {
        'body': 'Go to the store',
        'completed': false
    }],

    newTask: '',
},

});

就是这样!

如果您无法理解发生的事情:这是 Fiddle!

PS:有关这些代码工作的更多信息可以在 vuejs.org 上找到