laravel VueJs：如何编辑数组项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31899794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJs: How to Edit an Array Item
提问by LoveAndHappiness
Simple Todo-App. Please excuse my ignorance for making a rather basic question.
简单的 Todo 应用程序。请原谅我提出一个相当基本的问题的无知。
But how would you go about and edit a certain item on an array?
但是，您将如何着手编辑数组上的某个项目？
Normally I would try to bind the value of my input to a new property on my data object and then assign this new property to the old property on click throuch Vue's two way databinding.
通常我会尝试将我的输入值绑定到我的数据对象上的一个新属性，然后通过 Vue 的双向数据绑定在单击时将此新属性分配给旧属性。
Like this: http://jsfiddle.net/z7960up7/
像这样：http: //jsfiddle.net/z7960up7/
Well in my case I use the v-repeat directive, which loops through my data array but I can't use the v-model directive to use the two way databinding, because the values of the properties get corrupted if I do so. (See here: http://jsfiddle.net/doL46etq/2/)
在我的例子中，我使用 v-repeat 指令，它循环遍历我的数据数组，但我不能使用 v-model 指令来使用双向数据绑定，因为如果我这样做，属性的值会被破坏。（见这里：http: //jsfiddle.net/doL46etq/2/）
And now I wonder, how I would go about updating my array of tasks:
现在我想知道，我将如何更新我的任务数组：
My idea is to pass the VueObject (this) through my method on click, and then define the index on my event handler and then updating the tasks array, using the index, like this:
我的想法是在单击时通过我的方法传递 VueObject（this），然后在我的事件处理程序上定义索引，然后使用索引更新任务数组，如下所示：
HTML:
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:
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);
},
}
Here is my fiddle about it:
这是我的小提琴：
http://jsfiddle.net/doL46etq/3/
http://jsfiddle.net/doL46etq/3/
But the data object is not updated at all and I wonder how I would go about it and update it.
但是数据对象根本没有更新，我想知道我将如何处理它并更新它。
What is the best way to edit an element on the array, using Vue?
使用 Vue 编辑数组元素的最佳方法是什么？
Edit: An easy way, would just be to delete the element, and add the new to the array, using the push method, but I really want just to update the element, because I like to keep the dataobject in sync with my backend.
编辑：一种简单的方法，就是删除元素，然后使用 push 方法将新元素添加到数组中，但我真的只想更新元素，因为我喜欢使数据对象与后端保持同步。
采纳答案by LoveAndHappiness
Actually the simplest way to update an array item, is to two-way bind the task bodywith the v-modeldirective.
实际上，更新数组项的最简单方法是将任务主体与v-model指令进行双向绑定。
Example:
例子：
http://jsfiddle.net/z7960up7/2/
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-classdirective.
还可以使用v-class指令用 css 隐藏输入字段。
回答by Sangun
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.
简短的回答：在扩展构造函数中使用一个组件，然后在 HTML 中将索引作为属性传递给该组件，并使用计算属性来回链接到您的数据。
But don't be satisfied with just the short answer. Here is the long one:
但是不要满足于简短的回答。这是长的：
Situation: I am using your JSFiddleas base for this answer.
情况：我使用您的JSFiddle作为此答案的基础。
in HTML you have:
在 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>
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.
为了不让组件覆盖我们的实例，我们将为 vue 对象创建一个单独的构造函数，以便我们可以将新元素分配给我们的新对象。
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.
第 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: '',
},
});
});
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
PS：可以在 vuejs.org 上找到有关这些代码工作的更多信息
