невозможно войти в шаблон vue - PullRequest
Новая
       31

невозможно войти в шаблон vue

1 голос
/ 26 марта 2020

Я пытаюсь получить данные из моего API и передать их в массив, но когда я печатаю их в свою таблицу html, ничего не печатается. Вот мой код; код под v-for l oop не запускается, но я проверил журнал консоли, и данные поступают. Тот же код работает для другой страницы. 

<script>

    import axios from 'axios';
    export default  {
        name:"main_view",
        data () {
            return {

                request_list : [],

            }
        },
        
         methods : {
            viewRequests() {
                let instance = this;
                axios.get('/api/getrequests')
                    .then(function (response) {
                        console.log(response.data);
                        instance.request_list = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
         },

        mounted() {
            this.viewRequests();
        }
    }
</script>
[
    {
        "id": 1,
        "user_id": 20,
        "caltevar_id": 10,
        "comments": "comments",
        "area_requested": "ara1",
        "created_at": "2020-03-16T17:09:05.000000Z",
        "updated_at": "2020-03-16T17:09:05.000000Z"
    },
    {
        "id": 2,
        "user_id": 9,
        "caltevar_id": 55,
        "comments": "alsjshdhjksdjksd",
        "area_requested": "sdkshd",
        "created_at": "2020-03-16T17:09:05.000000Z",
        "updated_at": "2020-03-16T17:09:05.000000Z"
    }
]
<template>

    <div class="container">
        <h5>Lates Requests</h5>
        <div class="row">
            <div class="col-sm-8">
                <h4>isndie div</h4>
                {{request_list}}
                <div class="card" v-for="request in request_list" :key="request.id" >
                    <table class="table table-borderless table-responsive-sm">
                    <thead>
                        <tr>
                        <th scope="col">Area</th>
                        <th scope="col">Requested Date</th>
                        <th scope="col">Requested Cultivar</th>
                        <th scope="col">Requested Area</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr >
                        <th scope="row">{{request.id}}</th>
                        <td>{{request.created_at}}</td>
                        <td>{{request.area_requested}}</td>
                        <td>{{request.area_requested}}</td>
                        <span class="border">{{request.comments}}</span>
                        </tr>
                    </tbody>
                </table>
                </div>
            </div>
            <div class="col-sm-4">

            </div>
        </div>

    </div>

</template>
...