Массив пуст в VueJs от Axios GET response |VUEJS / Laravel - PullRequest
Новая
       29

Массив пуст в VueJs от Axios GET response |VUEJS / Laravel

0 голосов
/ 17 ноября 2018

Я учусь делать одностраничное приложение с курсом удеми, пытаясь сделать уни-проект. Проблема в том, что в моем контроллере я отправляю свой db запрос в виде json "alunos" на передний конец. Теперь, в Vue, если я только добавлю axios.get и console.log (response), я смогу увидеть, что мои данные из db есть, однако, когда я пытаюсь передать эти данные в мой массив, чтобы я мог отобразить в шаблоне, он все еще пусто, консоль не возвращает ошибки. Я ищу везде, но до сих пор не могу заставить его работать.

Шаблон 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>

Логика внутри AlunoComponent.vue 

   <script>
    export default {

        data(){

            return {

                aluno:{
                    nome:'',
                    nascimento:'',
                    rga:'',
                    cpf:'',
                    rg:'',
                    instituicao:'',
                    campus:'',
                    curso:'',
                    semestre:''
                },
                //vetor pras infos
                alunos:[],
                uri: '/alunos'

            }
        },

        methods:{

            loadAlunos(){

                    axios
                    .get(this.uri)
                    .then(response=>{

                    //console.log(response.data)
                    this.alunos = response.data.alunos
                }).catch(error => {
                  console.log(error)
                });
            }
        },

        mounted() {

            this.loadAlunos();
            console.log('Component mounted.')
        }
    }
</script>

Кто-нибудь может мне помочь? Я все еще начинающий Vue JS

1 Ответ

0 голосов
/ 17 ноября 2018

Ваш шаблон таблицы выглядит неправильно.Вы хотите что-то вроде этого: 

<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" не работает, потому что [] это truey , а alunos инициализируется как [].v-if="alunos.length" это то, ради чего ты идешь.

...