Level 24
You mean the students array is never populated or the {{ this.students }} in your template is never updated?
Jan 10, 2019
11
Level 1
Why isn't data updating?
I'm pretty new to Laravel and Vue, but I can't seem to figure this one out.
app.js:
require('./bootstrap');
import ExampleComponent from './components/ExampleComponent.vue';
window.Vue = require('vue');
const app = new Vue({
el: '#app',
components: {ExampleComponent}
});
ExampleComponent.vue:
<template>
<div class="container">
<h1>Students</h1>
<a href="/students/create" class="btn btn-primary">Add Student</a>
<br /><br />
{{ this.students }}
<ul class="list-group">
<li v-for="student in students" :key="student.id">@{{student}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
students: []
}
},
mounted() {
this.fetchStudents();
},
methods: {
fetchStudents() {
console.log('fetch students()', this.students)
axios.get('/index').then((response) => {
console.log(this.students)
this.students = response.data
console.log(this.students)
})
.catch((err) => console.log(err))
}
}
}
</script>
Console when I load the page:
VM4366 app.js:1791 fetch students() [__ob__: Observer]
VM4366 app.js:1793 [__ob__: Observer]
VM4366 app.js:1795 (5) [{…}, {…}, {…}, {…}, {…}, __ob__: Observer]
For whatever reason 'students' is never updating. The request works fine, the data is returned, but I can't get it to update in the component. I'm also not sure what the ___ob___:Observer stuff is. Anybody help?
Level 1
Correct, one way or another it's never making it to the page. {{ this.students }} just shows [] and doesn't change.
Level 50
Do not use {{ this.students }} in your template. Just {{ students}}
Level 1
Sorry, that was just me experimenting, either way the data still isn't updating.
Level 22
Do you have the Vue devtools installed? Maybe it's your for loop that's not working correctly. The students array could still be filled, but never shown.
Level 1
I do have Vue Devtools. Maybe the issue is there, the only thing showing up is the < Root > component. I'd assume the ExampleComponent should be there as well? Does that mean I have it set up wrong?
1 like
Level 50
@BURHOO - If you expand your root component you don't see your example-component?
That's odd. If you can see the <h1>Students</h1> in your blade and your console.log(this.student) in your console, I don't understand how it is not showing inside your vue dev tools.
Level 1
Nothing. If I click the root it just shows me the $vm0 variable and the right pane says "This instance has no reactive state." No child components or anything. Makes me think I'm configured wrong or am missing a library or something?
1 like
Level 2
Hi, did you fix it? I have the same problem.
1 like
Level 5
I have the same problem. Updating the data directly in the created() method works. But any method called from created() doesn't update the DOM, even though it does update the data (and therefore the virtual DOM?).
And the Vue inspector in Chrome says "This instance has no reactive state", and only shows .
Laravel 7.14.1 and Vue 2.6.11
Level 5
Ugh. The vue.js core was being loaded twice. No errors thrown, just some features worked and some didn't. Commented out one of the two places where js/app.js was being loaded and things are working. And the vue inspector is showing the root and the registered components.
Please or to participate in this conversation.