VueJs：如何编辑数组项

Posted 2023-02-22

【中文标题】VueJs：如何编辑数组项

【英文标题】：VueJs: How to Edit an Array Item

【发布时间】：2015-11-01 04:49:17

【问题描述】：

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

但是您将如何处理和编辑数组中的某个项目？

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

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

在我的例子中，我使用 v-repeat 指令，它循环遍历我的数据数组，但我不能使用 v-model 指令来使用双向数据绑定，因为如果我这样做，属性的值会损坏所以。 （见这里：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);
    ,

这是我的小提琴：

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

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

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

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

【参考方案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 对象创建一个单独的构造函数，这样我们就可以将新元素分配给我们的新对象。

这是使用扩展完成的。

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 上找到

【讨论】：

谢谢三君。虽然我需要一些时间来解决你的答案，因为我还没有深入研究 vue 组件。虽然我想知道，如果你能解释一下，编辑/更新是如何在这里完成的，我猜不使用组件：github.com/tastejs/todomvc/blob/gh-pages/examples/vue/js/app.js

另外，什么时候可以在你的 jsfiddle 中触发 Ajax 请求？

这取决于你想用 Ajax 请求做什么。如果您希望更新数据库中的信息，那么从组件上的 Setter 触发将是最好的（但是，请记住，每当单个字符更改时都会发出请求，因此您可能希望延迟并缓冲所有更改！）如果您希望更新数据，我建议添加一个新属性而不是定义数据。这也将允许您通过属性编辑值。这意味着如果您使用 v-repeat 项目，您可以使用 item.property 来更新变量。

谢谢Sangun，我已经接受了你的回答。然而，我可能会恢复要求没有“组件”的解决方案的问题，因为我（可能错误地）相信，组件的存在有助于使基本任务更容易，而不是使基本任务成为可能。我将通过 todomvc.com 应用程序和您的解决方案进行几次工作，并且在此之前可能会更聪明。非常感谢。

你可以在没有组件的情况下使用由同一个人 Vue.JS 制作的路由器插件来做同样的事情。但是，这个插件是我未开发的，我无法在这方面给你一个满意的答案。如果您希望有一个没有组件的解决方案（在我看来也同样有效），您可能希望使用github.com/vuejs/vue-router。希望有帮助！

【参考方案2】：

实际上更新数组项最简单的方法是将任务主体与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 的输入字段。