将一系列值数据绑定到 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 检索的数据的本地副本。 你可以找到如何做到这一点here。

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>