Динамическое использование v-модели для отображения результатов свойства внутри цикла v-for

Question

У меня есть массив, который я зацикливаю с помощью v-for, я не знаю количество элементов в этом массиве, он будет отличаться каждый раз, поэтому мне удалось достичь точки, куда я могу войти значения во входные данные и их правильное отражение в свойстве данных, которое я для них установил,

Теперь мне нужно разрешить две вещи:

- Сначала , после того, как я нажму edit, как вы увидите в коде, текущее значение свойства не появляется во входе, имеющем 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 в запросе, чтобы опубликовать данные на вашем сервере.