получение опечатки в Vue JS при попытке связать данные JSON в выбранной модели

Question

Я хочу связать опцию выбора с возвращенными данными JSON. Однако, когда я выполняю вызов API и устанавливаю группы моделей параметров для возвращенного JSON, я получаю ошибку «Ошибка типа: невозможно установить свойство« groups »из undefined».

Вот файл vue

<template>
    <div class="register">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h3 class="mb-10">Register as a volunteer</h3>
                    <form action="">
                        <div class="form-group">
                            <label for="first_name">First Name</label>
                            <input type="text" v-model="first_name" placeholder="First Name" class="form-control" id="first_name">
                        </div>
                        <div class="form-group">
                            <label for="last_name">Last Name</label>
                            <input type="text" v-model="last_name" placeholder="Last Name" class="form-control" id="last_name">
                        </div>
                        <div class="form-group">
                            <label for="group">Select Institution/Organization/Company</label>
                            <select v-model="group" class="form-control" id="group">
                                <option v-for="group in groups" v-bind:name="name">{{ group.code }}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="text" v-model="adv_phone" placeholder="Phone" class="form-control" id="phone">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" v-model="adv_password" class="form-control" id="password" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="confirm-password">Confirm Password</label>
                            <input type="password" v-model="adv_password" class="form-control" id="confirm-password" placeholder="Confirm Password">
                        </div>
                        <div class="from-group">
                            <input type="submit" class="btn btn-primary" value="Register">
                            &nbsp;
                            <router-link :to="{name:'home'}">
                            <a class="btn btn-outline-secondary">Cancel</a>
                            </router-link>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="register-form"></div>
    </div>
</template>

<script>
    export default {
        mounted(){
            this.getGroups()
        },
        data (){
            return {
                group: '',
                groups:'',
                first_name:'',
                last_name:'',
                adv_email:'',
                adv_phone:'',
                adv_password:'',
                confirm_password:''
            }
        },
        methods:{
            getGroups(){
                axios.get('/api/group/get/all')
                    .then(function (response) {
                        console.log(response);
                        this.groups = response.data;
                        //console.log(groups);
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
                    .then(function () {
                        // always executed
                    });
            }
        }

    }
</script>

и вот мой json вернулся

[{"id":8,"name":"Villa Maria Academy","code":"Vil-9458-3786","advisors":25,"students":99,"subscription_time":99,"subscription_type":0,"admin_name":"","admin_email":"","phone":"817879234","address":"Abcde street","state":"Pennsylvania","zip":16502,"apt":"","city":"Erie"},{"id":9,"name":"Cathedral Prep","code":"Cat-1959-1432","advisors":99,"students":99,"subscription_time":99,"subscription_type":0,"admin_name":"","admin_email":"","phone":"0","address":"","state":"","zip":0,"apt":"","city":""}]

Почему я получаю ошибку типа, когда я устанавливаю this.groups = response.data?

Answer 1

Вы можете использовать функцию стрелки для решения проблемы.

        methods:{
        getGroups(){
            axios.get('/api/group/get/all')
                .then(response => {
                    console.log(response);
                    this.groups = response.data;
                    //console.log(groups);
                })
                .catch(error => {
                    console.log(error);
                })
                .then(() => {
                    // always executed
                });
        }
    }