Question

我正在使用v-for循环遍历学生学习特定学科的记录。我需要为每个学生分配参加考试的分数。我发现很难在文本字段中键入唯一标记，因为它们在具有相似v模型的所有字段中都重复出现。我该怎么办？

    <div id="">   
                            <tbody>
                         <tr v-for="item in subjectStudentsData">
                          <td>{{item.surname}}</td>
                          <td>{{item.registrationNumber}}</td>
                          <td>
                              <input type="text" v-model="exam.cat1" />
                          </td>
                              <td>
                              <input type="text" v-model="exam.cat2" />
                          </td>
                              <td>
                              <input type="text" v-model="exam.cat3" />
                          </td>
                              <td>
                              <input type="text" v-model="exam.mainExam" />
                          </td>
                          <td>
                              <input type="button" value="Save" />
                          </td>
                          </tr>
                   </tbody>
                   </table>                        

    </div>

   my script section                                
    <script type="text/javascript">

          var subjectStudentsVM=new Vue({
          el:"#subjectStudentsSection",
          data:function(){  
                   return {
                           subjectStudentsData:[

                               {
                                 surname:"Simon",
                                 registrationNumber:"20",
                                 subjects:{
                                            id:"2"
                                          name:"English"
                                           }
                                },
                                {
                                  surname:"Kuch",
                                  registrationNumber:"23",
                                  subjects:{
                                             id:"2"
                                           name:"English"
                                            }
                                 },
                                   ],
                                 exam:{
                                             cat1:'',
                                             cat2:'',
                                             cat3:'',
                                         mainExam:''
                                       }
                            }   
                           }

                        })


                        </script>

Answer 1

如果您想将每个输入与v-model绑定，则需要为此提供数据属性。您的代码可能如下所示：

<tr v-for="(item, index) in subjectStudentsData">
...
<input type="text" v-model="subjectStudentsData[index]"/>
...
data(){    
  return {
    subjectStudentsData: [{"Simon"},{"John"}], //note the syntax 
          }   
       },

现在您可以在其他一些事情中使用它，例如在循环内使用一个函数，但这确实可行。

Answer 2

最简单的解决方案是在每个学生身上拥有一个exam属性：

subjectStudentsData: [
  {
    surname: "Simon",
    registrationNumber: "20",
    subjects: {
      id: "2"
      name: "English"
    },
    exam: {
      cat1: '',
      cat2: '',
      cat3: '',
      mainExam: ''
    }
  },
  {
    surname: "Kuch",
    registrationNumber: "23",
    subjects: {
      id: "2"
      name: "English"
    },
    exam: {
      cat1: '',
      cat2: '',
      cat3: '',
      mainExam: ''
    }
  },
]

然后，您可以在模板中引用相应的exam对象：

<input type="text" v-model="item.exam.cat1" />

如果您无法为每个exam添加item属性，则此方法可能存在问题。例如，这可能是因为subjectStudentsData对象在其他地方使用了，所以您不想对其进行突变。如果它们来自父组件或存储，也可能会违反单向数据流。

如果是这种情况，您有两种选择：

创建一个单独的对象或数组来保存检查对象。每个学生仍然需要一个考试对象。如果使用数组，则可以通过数组索引将它们配对。如果使用对象，则可以使用某种形式的id来执行映射。无论哪种方式，您都需要注意使两者保持同步，通常的Vue反应性警告也可能适用。
将对象成对包装在另一个对象中。通过这种方法，您将创建一个包装对象，用于保存学生和考试。学生没有突变，但是确实需要更新模板以处理新格式。使新阵列保持同步也是这种方法的问题。

对于第二种选择，数据最终看起来像这样：

subjectStudentsData: [
  {
    student: {
      surname: "Simon",
      registrationNumber: "20",
      subjects: {
        id: "2"
        name: "English"
      }
    },
    exam: {
      cat1: '',
      cat2: '',
      cat3: '',
      mainExam: ''
    }
  },
  {
    student: {
      surname: "Kuch",
      registrationNumber: "23",
      subjects: {
        id: "2"
        name: "English"
      }
    },
    exam: {
      cat1: '',
      cat2: '',
      cat3: '',
      mainExam: ''
    }
  },
]

模板将需要相应地更新以使用这些嵌套路径。这里要注意的关键是保存学生数据的原始对象尚未更改。它们存储在包装对象的student属性中。然后，exam对象已存储在包装对象的exam属性中。

我要强调的是，上面的示例仅显示了数据的形状。实际上，student属性将来自其他地方，不会像示例中那样是内联的。

另一种替代方法是引入一个新组件来表示行。每行都有其自己的本地data属性，自然导致每一行都有自己的exam对象。对于您的用例而言，这是否是一个好的解决方案，在某种程度上取决于对exam对象的访问权限，以及是否可以将相关对象干净地传递到需要的地方。

Vue Js中的V循环传递数据

2 个答案: