Hey there! I'm working on adding JSON data to an element by making a JSONP call to an external API. It seems that Vue is not recognizing the variable properly, even after following advice from the Laracasts forum about defining data and methods in components. My setup involves using vue.js2 with Laravel 5.4.
The error message I receive is: [Vue warn]: Property or method "names" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Below is my code:
app.js
Vue.component('search',
{
template: '<div class="panel-heading" ></div>',
data: function(){
return {
names: []
}
},
methods: {
getData: function(){
var self = this;
// GET request
this.$http.jsonp(url,
{
jsonpCallback: "JSON_CALLBACK"
})
.then(
response=>{
this.names = response.body
})}
}
});
const app = new Vue({
el: '#search'
});
blade template
<div id='search'>
<search v-for='name in names'>
@{{name.label.eng}}
</search>
</div>