Hi i am trying to use Vue in a laravel app but i have some issues. Basically i need to retrieve data from a get request and build some results based on it. The problem is that i don't even get to correctly retrieve the data inside my array variable. I better explain
in my app.js i load my vue instance
Vue.component('search', require('./components/search.vue'));
const app = new Vue({
el: '#app',
});
in my main.blade.php i insert my vue component
<search class="row expanded container"></search>
this is my vue file
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Example Conhenhmponent</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
test:"this is my sample",
results: []
}
},
mounted () {
console.log(this); // here my obj exists
console.log('Component mounted.') // it works
axios.get("http://localhost:8000/api/search?q=qwfqw")
.then(function(resp){
if(typeof resp.data == 'string') {
resp.data = JSON.parse(resp.data);
}
console.log(resp.data); // here the object exists
this.results = resp.data;
});
}
}
</script>
The page loads but i get an error that says the results var is undefined. How can i fill my result var with the get data? what's the right way to do that?
via Debora8_8
