As I iterate over an array using v-for, the number of items in this array varies each time. Currently, I am able to input values into the fields and have them correctly update the data property associated with them.
However, there are two issues that need resolution:
-Firstly, when I click on edit as shown in the code, the current value of the property does not appear in the input field bound by v-model (resulting in an empty input box). It seems to work only one way. (I can input new data which gets reflected in the data property as mentioned earlier)
-Secondly, I want to submit the updated data to the server using something like axios. The challenge here is how to assign these new values to variables for submission since the number of values may vary each time.
Below is the component code snippet:
<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_user || !currentStudent(student)">
<button class="btn btn-primary" @click="edit(student, index)" :disabled="editing_user == true">
Edit
</button>
</td>
<td v-if="editing_user && 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_user || !currentStudent(student)">
{{ quiz.pivot.score }}
</td>
<td v-for="(quiz, index) in student.quizzes" v-if="editing_user && currentStudent(student)">
<input v-model="quiz_scores[index]">
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
props: ['students', 'quizzes'],
data: function () {
return {
editing_user: '',
index: '',
quiz_scores: []
};
},
mounted() {
//
},
methods: {
edit(student, index) {
this.editing_user = student,
this.index = index,
},
cancelEdit() {
this.editing_user = '',
this.index = '',
this.quiz_scores = [],
},
currentStudent(student) {
return this.editing_user == student
}
},
}
</script>
This code excerpt is a work in progress. Any suggestions or advice on what steps to take next would be greatly appreciated.