I recently started exploring Vue and I'm working on creating a basic search function that takes a user input query and displays all matching users.
To help me with this, I've been following a video tutorial for guidance.
Despite not encountering any errors in my console, I'm facing a peculiar issue where the page content briefly loads, then suddenly flashes white and goes completely blank.
The code snippet for the page is as follows:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="container" id="searchPage">
...
</div>
...
<script src="assets/app.js"></script>
</body>
</html>
In addition, here is my app.js script:
Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('X-CSRF-TOKEN').getAttribute('content');
new Vue({
el: '#searchPage',
data: {
query: '',
users: [],
},
methods: {
search: function() {
this.$http.post('/', { query: this.query } ).then(function(response) {
console.log(response);
}, function(response) {
// error callback
});
}
}
});
What could be causing the sudden blank screen? Any insights would be greatly appreciated.