VueJs：如何编辑数组项目

简单的Todo应用程序。请原谅我的无知提出一个相当基本的问题。VueJs：如何编辑数组项目

但是，你将如何去和阵列上编辑某个项目？

通常我会尝试我输入的值绑定到一个新的属性我的数据对象，然后在此新的属性分配给旧财产上点击throuch Vue公司的双向数据绑定。

嗯，我使用V-重复指令，它通过我的数据数组循环，但我不能使用V型指令以使用数据绑定双向的，因为如果我这样做，属性的值会被破坏。（在这里看到：http://jsfiddle.net/doL46etq/2/）

现在我不知道，我怎么会去更新我的任务数组：

我的想法是，通过我对点击的方法来传递VueObject（本），然后定义指数上我的事件处理程序，然后更新任务阵列，使用索引，就像这样：

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方法将新添加到数组中，但我真的只想更新元素，因为我想保持数据对象同步与我的后端。

来源

2015-08-09 LoveAndHappiness

其实可以找到更新的阵列的最简单方法项目，是双向绑定任务主体与v-型号指令。

例子：

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级指令隐藏输入字段与CSS。

来源

2015-09-17 09:57:22 LoveAndHappiness

答案很简单：在扩展构造函数中使用的组件，然后在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

来源

2015-08-09 02:33:11 Sangun

谢谢Sangun。虽然我需要一些时间才能解决你的问题，因为我还没有研究vue组件。虽然我想知道，如果你能解释一下，编辑/更新是如何完成的，我想不需要使用组件：https：//github.com/tastejs/todomvc/blob/gh-pages/examples/vue/ js/app.js – LoveAndHappiness

另外，什么时候在jsfiddle中启动Ajax请求？ – LoveAndHappiness

这取决于您想要如何处理Ajax请求。如果您希望更新数据库中的信息，那么从组件上启动Set组件将是最好的（但是，请记住，只要单个字符发生更改就会发出请求，因此您可能需要延迟并缓冲所有的变化！）如果你想更新数据，我会建议添加一个新的属性，而不是定义数据。这将允许您通过属性编辑值。这意味着如果您使用v-repeat项目，则可以使用{{item.property}}更新变量。 – Sangun

VueJs：如何编辑数组项目

回答

相关问题