getting typerror in Vue JS while trying to bind the JSON data in select model - laravel

Question

I want to bind the select option with returned JSON data. However, when I do the API call and set the options model groups to the returned JSON, I get the error 'TypeError: Cannot set property 'groups' of undefined'.
Here is the vue file
<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">
<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>
and here is my json returned
[{"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":""}]
Why am I getting a type error, when I set this.groups = response.data?

Answer 1

You can use arrow function to fix problem.
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
});
}
}