Question

我在尝试做一个uni项目的同时学习如何做一个带有udemy课程的单页应用程序。问题是，在我的控制器中，我将数据库查询作为json“ alunos”发送到前端。现在，在Vue中，如果仅放置axios.get和console.log（response），我可以看到来自db的数据，但是当我尝试将这些数据推入数组以便可以在模板上显示时，它仍然为空，控制台不返回任何错误。我到处搜索，但仍然无法正常工作。

AlunoComponent.vue模板

def initialize(player)

AlunoComponent.vue内部的逻辑

<template>
<div>

    <button class="btn btn-primary btn-block">Add Novo Aluno</button>

    <table class="table" v-if="alunos">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">RGA</th>
                <th scope="col">Nome</th>
                <th scope="col">Instituição</th>
                <th scope="col">Campus</th>
                <th scope="col">Curso</th>
                <th scope="col">Semestre</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <th v-for="aluno in alunos" v-bind:key="aluno.id" scope="row" >1</th>
                {{alunos}}
                <td>{{aluno.id}}</td>
                <td>{{aluno.rga}}</td>
                <td>{{aluno.nome}}</td>
                <td>{{aluno.instituicao}}</td>
                <td>{{aluno.campus}}</td>
                <td>{{aluno.curso}}</td>
                <td>{{aluno.semestre}}</td>
                <td><button class="btn btn-info">Edit</button></td>
                <td><button class="btn btn-danger">Delete</button></td>
            </tr>   
        </tbody>
        </table>

</div>

有人可以帮我吗？我还是vue js的初学者

Answer 1

您的表模板看起来不正确。您想要这样的东西：

<tbody>
    <tr v-for="aluno in alunos" :key="aluno.id" scope="row">
        <td>{{aluno.id}}</td>
        <td>{{aluno.rga}}</td>
        <td>{{aluno.nome}}</td>
        <td>{{aluno.instituicao}}</td>
        <td>{{aluno.campus}}</td>
        <td>{{aluno.curso}}</td>
        <td>{{aluno.semestre}}</td>
        <td><button class="btn btn-info">Edit</button></td>
        <td><button class="btn btn-danger">Delete</button></td>
    </tr>   
</tbody>

如果alunos中有5个元素，当前模板将产生如下内容：

<tbody>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        {{alunos}}
        <td>{{aluno.id}}</td>
        <td>{{aluno.rga}}</td>
        <td>{{aluno.nome}}</td>
        <td>{{aluno.instituicao}}</td>
        <td>{{aluno.campus}}</td>
        <td>{{aluno.curso}}</td>
        <td>{{aluno.semestre}}</td>
        <td><button class="btn btn-info">Edit</button></td>
        <td><button class="btn btn-danger">Delete</button></td>
    </tr>   
</tbody>

另一个提示，如果您想在alunos数组为空时隐藏表，则v-if="alunos"不起作用，因为[]为truthy，而{{1 }}初始化为alunos。我相信[]是您要去的地方。

来自Axios GET响应的VueJs中的数组为空VUEJS / LARAVEL

1 个答案: