after several attempts to find a solution here I decided to post it.
I am a beginner and using laravel + vue.js + mysql
Approach
I fetch data via an Axios call and update the data within the vue instance. Then I would like to show this data and update the DOM. I use mounted() to get the data and update the array "users".
Problem
I am able to get the data, update the array (when console logging), however I am not able to show it in the DOM. It wont update. What am I missing?
My vue component:
<template>
<div class="container">
<form class="form" v-on:submit.prevent="submituser">
<div class="row">
<label id="username">Username</label>
<input type="text" v-model="username" name="username" />
</div>
<div class="row">
<label id="password">Password</label>
<input type="password" name="password" v-model="password" v-on:keyup="CheckPrint" />
</div>
<div class="row">
<button type="submit" class="mt-2 btn btn-primary">Sign up</button>
</div>
</form>
<h2>All Users</h2>
<p>{{users}}</p>
<ul>
<li v-for="user in users" :key="user.name">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import axios from "axios";
export default {
data: function() {
return {
password: "",
username: "",
users: []
};
},
mounted() {
var vm = this;
axios.get("api/user").then(function(response) {
vm.users = response.data;
console.log(vm.users, "User updated");
});
}
};
</script>My app.js component:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require("./bootstrap");
window.Vue = require("vue");
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
import Vue from "vue";
import Vuex from "vuex";
import store from "../store/store";
Vue.use(Vuex);
Vue.component("Signup", require("./components/User/Signup.vue"));
const app = new Vue({
el: "#app",
store
});Thanks a lot for your help. I am sure its an easy one for most of you!
this.users = response.data;