将一系列值的数据绑定到 v-for 中的对象

Question

我正在构建一个小应用程序来输入我的锻炼结果以进行一些分析。 我从mongodb实例中检索数据，如下所示(单个练习。锻炼仅由具有相同日期的所有练习组成)：

mongodb document excerpt

{
"_id" : ObjectId("59d3b0a6250bb03934ddca46"),
"date" : "2017-10-01",
"exercise" : "Row",
"sets" : [ 
{
"resistance" : 42.5
}, 
{
"resistance" : 45
}, 
{
"resistance" : 47.5
}
],
"intensity" : 5
}

前端代码生成一个锻炼列表(所以，日期...)，我可以单击其中一个来根据锻炼的值生成一个表格(因此所有具有该日期的练习)，并在编辑模式下使用以前的值自动填充字段，以防我想更正它们(这是我所得到的 - 我将其限制为 4 组，因为将所有内容包装在一个v-for循环中只是甚至无法动态生成列)

component template excerpt

<table class="tbl tbl_border">
<tr>
<th>Exercise</th>
<th>Set 1</th>
<th>Set 2</th>
<th>Set 3</th>
<th>Set 4</th>
</tr>
<tr v-for="(exercise, exercise_index) in exercises">
<th>{{exercise.exercise}}</th>
<td v-for="(set, set_index) in exercise.sets" class="tbl_set tbl_border">
<p v-if= "edit == false">{{set.resistance}}</p>
<input v-else type="text" 
:placeholder="set.resistance" 
v-model="exercises">
</td>
</tr>
</table>
<button v-if= "edit == false" @click="enableEditMode"> Edit </button>
<button v-else @click="saveAndExit"> Save </button>

该组件包含一个computed属性，用于检索所选练习(通过vuex存储)

exercises:{
get: function(){
return store.state.exercises
},
set: function(exercises){
}
},

问题是：我现在可以编辑整个表(我想要)，但是如何将所有输入值绑定到objects中(每行一个，以适应数据模型，是有意义的)，以便我可以稍后在函数中使用它们来发送 HTTP 请求？

更新：这是小提琴，几乎以相同的方式工作(它只是同时获取所有锻炼，因为后端按日期进行过滤)： https://jsfiddle.net/9695c73L/我希望这能弄清楚它应该如何工作。

Answer 1

1.- 首先，您需要使用通过 vuex 检索的数据的本地副本。 您可以在此处找到操作方法。

2.- 然后，您可以将输入值绑定到该本地数据。

<input v-else type="text" :placeholder="set.resistance" v-model="set.resistance">

这是一个例子

var app = new Vue({
el: '#app',
data: {
edit: false,
exercises: [
	{
"_id" : "59d3b0a6250bb03934ddca47",
"date" : "2017-11-01",
"exercise" : "Row",
"sets" : [ 
{ "resistance" : 42.5 }, 
{"resistance" : 45}, 
{ "resistance" : 47.5}
],
"intensity" : 5
	}
	,
{
"_id" : "59d3b0a6250bb03934ddca46",
"date" : "2017-10-01",
"exercise" : "Row",
"sets" : [ 
{ "resistance" : 36.7 }, 
{"resistance" : 40}, 
{ "resistance" : 42.8}
],
"intensity" : 5
	},
],
},
methods:{
	saveAndExit: function(){
// All your data is updated in this.exercises
}
},
mounted: function () {
this.$nextTick(function () {
// here you load your data from vuex
//this.exercise = ...
})
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">

<table>
<tr>
<th>Exercise</th>
<th>Set 1</th>
<th>Set 2</th>
<th>Set 3</th>
</tr>
<tr v-for="(exercise, exercise_index) in exercises">
<td>{{exercise.exercise}}</td>

<td v-for="(set, set_index) in exercise.sets" class="tbl_set tbl_border">

<p v-if="edit == false">{{set.resistance}}</p>
<input v-else type="text" 
:placeholder="set.resistance" 
v-model="set.resistance">
</td>
</tr>
</table>
<button v-if="edit == false" @click="edit = true"> Edit </button> 
<button v-else @click="saveAndExit(), edit = false"> Save </button>
</div>