Incorporating vue.js into my laravel project has presented a challenge. Despite having data in the variable names, vue.js is rendering an empty array.
I am using laravel 5.4 and vue.js2, with vue-resource for the jsonp get method.
When attempting to display the variable containing data {{names}} in the template, it only shows an empty array without any error logs appearing.
template.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body">
{{names}}
</div>
</div>
</div>
</div>
</div>
</template>
Js
<script>
export default {
data: function(){
return {
names: []
};
},
methods: {
getData: function(){
var self = this;
// GET request
this.$http.jsonp(url, {jsonpCallback: "JSON_CALLBACK"})
.then(response=>{
return response.body;
})
.then(data =>{
self.names = data
console.log(JSON.stringify(self.names))// logs the data
})
}
},
mounted() {
this.getData()
console.log('Component mounted.')
}
}
</script>
blade.php
<search id='search'>
</search>
The JSON response is as follows:
[
{
"uri":"http://en.wikipedia.org/wiki/Samsung",
"id":"24366",
"type":"org",
"score":527013,
"label":{
"eng":"Samsung"
}
},
{
"uri":"http://en.wikipedia.org/wiki/Samsung_Electronics",
"id":"30860",
"type":"org",
"score":135216,
"label":{
"eng":"Samsung Electronics"
}
}
]
vue dev tools reveal the variable https://i.sstatic.net/bK8Rf.png