My issue revolves around the integration of VueJs, Vue-Resource, and Laravel.
The problem occurs when attempting to assign a local variable to response data received from an AJAX request using vue-resource.
Code
Javascript
<script>
flags_page = new Vue({
el: '#body',
data: {
retrievedFlags: {},
chosenFlag: ''
},
ready: function () {
this.getFlagTypes();
},
methods: {
getFlagTypes: function(){
this.$http.get('/getFlags=' + '{{ $id }}', function(data){
//Issue lies on this line
this.retrievedFlags = data.retrievedFlags;
})
}
}
});
</script>
PHP
public function getFlags($type)
{
$flags = Flags::all();
return [
'retrievedFlags' => $flags,
'chosenFlag' => $type,
];
}
ERROR
vue.min.js:7 Uncaught TypeError: Cannot read property 'get' of undefined
at new n (vue.min.js:7)
at r._bind (vue.min.js:8)
at n (vue.min.js:6)
at vue.min.js:6
at new n (vue.min.js:6)
at n.create (vue.min.js:6)
at r.create (vue.min.js:6)
at r.diff (vue.min.js:6)
at r.update (vue.min.js:6)
at n.update._update (vue.min.js:8)
Despite numerous changes made, I am still unable to identify the root cause of this error. It is puzzling as other similar pages function correctly with the same logic.
It is interesting to note that when I console.log() the returned data object, it displays perfectly fine. However, once an attempt is made to assign it to a variable, the error surfaces.
In addition, VueJS and Vue-Resource are both locally included in the project.
Screenshot of my console.log(this): https://i.stack.imgur.com/YaAvR.jpg