动态使用 v 模型在 v-for 循环中显示属性的结果

Question

>我有一个使用 v-for 循环的数组，我不知道这个数组中的项目数，每次都会不同，所以我设法达到了一个点，我可以将值输入输入并将它们正确反映在我为它们设置的数据属性中，

现在我需要解决两件事：

-首先，在我单击编辑后，您将在代码中看到，属性的当前值不会出现在具有 v 模型的输入中(我得到一个空输入框)，它仅单向工作。(我可以在空框中输入数据，它将反映在我上面提到的数据属性中)

-其次，我需要能够通过类似 axios 的东西将新数据提交到服务器，我不知道如何将这些新值分配给我可以提交的变量，因为我不知道每次我会有多少个值。

下面是组件的代码：

<template>
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>Options</th>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Student Id</th>
<th v-for="quiz in quizzes">
{{ quiz.quiz_name }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(student, index) in students">
<td v-if="!editing || !currentStudent(student)">
<button class="btn btn-primary" @click="edit(student, index)" :disabled="editing == true">
Edit
</button>
</td>
<td v-if="editing && currentStudent(student)">
<button class="btn btn-primary btn-xs">Update</button>
<a @click="cancelEdit">
Cancel
</a>
</td>
<td>
{{ index }}
</td>
<td>
{{ student.full_name }}
</td>
<td>
{{ student.email }}
</td>
<td>
{{ student.secret_id.secret_id }}
</td>
<td v-for="quiz in student.quizzes" v-if="!editing || !currentStudent(student)">
{{ quiz.pivot.score }}
</td>
<td v-for="(quiz, index) in student.quizzes" v-if="editing && currentStudent(student)">
<input v-model="quiz_scores[index]">
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: ['students', 'quizzes'],
data: function () {
return {
editing: false,
editing_user: '',
index: '',
quiz_scores: []
};
},
mounted() {
//
},
methods: {
edit(student, index) {
this.editing_user = student,
this.index = index,
this.editing = true
},
cancelEdit() {
this.editing_user = '',
this.index = '',
this.quiz_scores = [],
this.editing = false
},
currentStudent(student) {
return this.editing_user == student
}
},
}
</script>

当然，这是不完整的代码，如果您对我应该做什么有任何提示或提示，我将不胜感激。

Answer 1

在编辑操作中，您的输入为空，因为您的 v 模型quiz_scores[index]始终为空。 您可以在"编辑"上填写它，单击如下：

edit(student, index) {
this.editing_user = student
this.index = index
this.editing = true
student.quizzes.forEach( q => {
this.quiz_scores.push(q.pivot.score)
})
}

在相同的逻辑上，对于您的更新，您可以初始化一个空的数据new_scores: {}，并在单击"更新"时用您需要的任何内容(当前学生对象、分数数组等)填充它。然后在请求中使用new_scores将数据发布到您的服务器上。