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-model 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在您的服务器上发布数据。

动态使用v-model显示v-for循环内属性的结果

1 个答案: