Hey there! I'm currently working on implementing Vue in a Laravel application, but I've run into some challenges. Essentially, my goal is to retrieve data from a GET request and generate results based on that data. However, I'm struggling to successfully store the retrieved data in an array variable. Let me elaborate:
In my app.js file, I initialize my Vue instance like this:
Vue.component('search', require('./components/search.vue'));
const app = new Vue({
el: '#app',
});
Then, in my main.blade.php file, I include my Vue component as follows:
<search class="row expanded container"></search>
Below is the content of 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 Component</div>
<div class="panel-body">
I'm an example component!
{{test}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
test:"this is my sample",
results: []
}
},
mounted () {
console.log(this); // object exists here
console.log('Component mounted.') // works fine
axios.get("http://localhost:8000/api/search?q=qwfqw")
.then((resp) => {
if(typeof resp.data === 'string') {
resp.data = JSON.parse(resp.data);
}
console.log(resp.data); // object exists here
this.results = resp.data;
}).catch(err => {
console.error(err);
});
}
}
</script>
The page loads without any issues, but I encounter an error stating that the "results" variable is undefined. Can anyone guide me on how to properly populate the "results" variable with the fetched data from the GET request? What would be the correct approach to achieve this?