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>

Databind系列值以v-for为对象

1 个答案: