Laravel 尝试在选择模型中绑定JSON数据时在Vue JS中获取TypeError

我想用返回的JSON数据绑定select选项。但是，当我执行API调用并将选项模型组设置为返回的JSON时，会出现错误“TypeError:Cannotsetproperty”groups“of 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>

---

当我设置this.groups=response.data时，为什么会出现类型错误？

您可以使用箭头函数来解决问题

        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
                });
        }
    }

---

this

的范围不是您想象的那样，因为它实际上是

axios

实例。这是ES6 fat arrow函数解决的问题。或者，您可以在axios.get…之前别名

var\u self=this

，然后您可以使用

\u self.groups=response.data

，但我讨厌这种语法。请注意，如果您不将其向下传输，您将失去对所有版本Internet Explorer的支持（即，在现代，您可以使用babel编译器来支持IE）。

        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
                });
        }
    }