I am learning VueJS following a course in Udemy, and I have this code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/968b5b8bf4.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-header">Nuevo Usuario</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name" >Nombre Completo</label>
<input v-model="name" type="text" class="form-control" />
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<input v-model="email" type="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input v-model="password" type="password" class="form-control" />
</div>
<button #click.prevent="addUser" class="btn btn-primary btn-block">Ingresar Usuario</button>
</form>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="card">
<div class="card-header">Actualizar Usuario</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">Nombre Completo</label>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<label for="email">Correo Electrónico</label>
<inputt type="email" class="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<input type="password" class="form-control" />
</div>
<button #click.prevent="modifyUser" class="btn btn-primary btn-block">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 mt-3">
<table class="table table-bordered table-striped">
<thead class="text-center">
<th>#</th>
<th>Nombre Completo</th>
<th>Correo Electrónico</th>
<th>Acciones</th>
</thead>
<tbody>
<tr class="text-center" v-for="(user, index) in users">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>
<button class="btn btn-success btn-sm">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-danger btn-sm">
<i class="fas fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
and then, my VueJS code:
new Vue({
el: '#app',
data: {
newUser: {
name: '',
email: '',
password: '',
},
users: [],
},
methods: {
addUser () {
var nuevo = {}
nuevo.name = this.newUser.name
nuevo.email = this.newUser.email
nuevo.password = this.newUser.password
this.users.push(nuevo)
this.newUser.name = ''
this.newUser.email = ''
this.newUser.password = ''
},
},
})
As you can see, I am creating a variable to save the data obtained by a form and send it to an array. Then use the v-for to iterate on each of them and have them displayed in a table. But I am getting this error:
vue.js:634 [Vue warn]: Property or method "name" is not defined on the
instance but referenced during render. Make sure that this property is
reactive, either in the data option, or for class-based components, by
initializing the property.
<input v-model="name" type="text" class="form-control" />
should be
<input v-model="newUser.name" type="text" class="form-control" />
as you defined the data as {newUser: {name: ""}}.
do same to your other fields such as email
Related
Is it possible to pass various data in the Routing.kt class between different routes without saving the data in a database?
I'm calling a rest api in a search ui "search.ftl" and want to show the response data in another ui "found.ftl" and they're in different fields. If the data looks good the user can click "save" and then the data really go into the database.
At the end of get("field") I need to pass the data to get("found).
That's my code so far:
Routing.kt:
route("search") {
get {
call.respond(FreeMarkerContent("search.ftl", model = null))
}
get("field") {
// API-Call and json data in response
val title = volumeInfoObject?.get("title")
val author = authors?.get(0)
val publisher = volumeInfoObject?.get("publisher")
val pageCount = volumeInfoObject?.get("pageCount")
client.close()
call.respondRedirect("/search/found")
// How to pass data to get("found")?
}
get("found") {
call.respond(FreeMarkerContent("found.ftl", model = null))
}
}
Search.ftl:
<#import "_layout.ftl" as layout />
<#layout.header>
<div>
<div class="text-center">
<h1 class="display-4">Search</h1>
</div>
<!-- // style="border:1px solid red; -->
<div class="container">
<div class="row">
<div class="form-group has-search">
<span class="fa fa-search form-control-feedback"></span>
<form action="/search/field" method="get">
<input type="text" class="form-control" name="isbn">
</form>
</div>
</div>
<br><br><br>
<div class="row">
<div class="col-sm-3">
<div class="img"><img src="/static/500x900.png" class="img-fluid" alt="Responsive image"></div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
</div>
<div class="col-4 col-sm-6">
<form>
<fieldset disabled>
<legend>Book Information</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Titel</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Author</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Publisher</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Pages</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</#layout.header>
Found.ftl:
<#-- #ftlvariable name="book" type="com.nw.models.Book" -->
<#import "_layout.ftl" as layout />
<#layout.header>
<div>
<div class="text-center">
<h1 class="display-4">Search</h1>
</div>
<!-- // style="border:1px solid red; -->
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="img"><img src="/static/500x900.png" class="img-fluid" alt="Responsive image"></div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
</div>
<div class="col-4 col-sm-6">
<form action="/search/found" >
<legend>Book Information</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Titel</label>
<input type="text" id="disabledTextInput" class="form-control" name="title" value="title">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Author</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Publisher</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Pages</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</#layout.header>
The solution ist now like this:
I'm saving the found book directly to db and show it on my /found route:
call.respondRedirect("/search/found/${book?.id}")
On the /found page there is a delete button, so If you are not happy with the result you can directly delete the book.
get("found/{id}") {
val id = call.parameters.getOrFail<Int>("id").toInt()
call.respond(FreeMarkerContent("edit.ftl", mapOf("book" to bookFacade.book(id))))
}
I have problems when I put all my buttons inside one component and use click event to trigger the modals, I can put single button to single component and use event click with created custom components but I am questioning is there any way to put all buttons inside a components and that still works.
Buttons.vue
<template>
<button
class="btn btn-link btn-info btn-icon btn-sm"
data-toggle="modal" data-target="#userInfoModal"
#click="getUserInfo(user)">
<i class="icon-alert-circle-exc"></i>
</button>
<button
class="btn btn-link btn-warning btn-icon btn-sm"
data-toggle="modal" data-target="#userEditModal"
#click="getUserInfo(user)">
<i class="icon-pencil"></i>
</button>
<button
class="btn btn-link btn-danger btn-icon btn-sm"
data-toggle="modal" data-target="#userRemoveModal"
#click="getUserInfo(user)">
<i class="icon-simple-remove"></i>
</button>
</template>
usersManage.vue
<template>
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex flex-row">
<h4 class="card-title align-self-center">Users Manager</h4>
<button class="btn btn-success btn-fab btn-icon btn-round mb-3 ml-2"
data-toggle="modal" data-target="#addUserModal">
<i class="icon-add"></i>
</button>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Username</th>
<th class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, id) in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.username }}</td>
<td class="text-right">
<!--- BUTTON COMPONENT HERE --->
<Buttons />
<!--- END BUTTON COMPONENT --->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- MODALS -->
<!-- ADD USER MODAL -->
<div
class="modal modal-black fade" id="addUserModal"
tabindex="-1" role="dialog" aria-labelledby="addUserModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="addUserModal">Add new user</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Name</label>
<div class="col-md-6">
<div class="form-group">
<input
type="name"
name="name"
class="form-control"
v-model="newUser.name"
/>
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Username</label>
<div class="col-md-6">
<div class="form-group">
<input type="username" name="username" class="form-control"
v-model="newUser.username" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Email</label>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" class="form-control"
v-model="newUser.email" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Password</label>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="password" class="form-control"
v-model="newUser.password" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Confirm Password</label>
<div class="col-md-6">
<div class="form-group">
<input type="password" name="confirmPassword" class="form-control"
v-model="newUser.confirmPassword" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-4 col-form-label">Roles</label>
<div class="col-md-6">
<div class="form-group">
<input type="roles" name="roles" class="form-control"
v-model="newUser.roles" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary" #click.stop.prevent="addUser()">
Create user
</button>
</div>
</form>
</div>
</div>
</div>
<!-- END ADD USER MODAL -->
<!-- USER's INFO MODAL -->
<div class="modal modal-black fade" id="userInfoModal"
tabindex="-1" role="dialog" aria-labelledby="userInfoModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userInfoModal">
<strong class="text-primary">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>'s Basic Information
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body" id="userInfo">
<div class="row">
<div class="col-6">
<p>ID: {{ userInfo.id }}</p>
<p>Phone: {{ userInfo.phone }}</p>
<p>Username: {{ userInfo.username }}</p>
</div>
<div class="col-6">
<p>Name: {{ userInfo.name }}</p>
<p>Email: {{ userInfo.email }}</p>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row-reverse">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- END USER's INFO MODAL -->
<!-- EDIT USER MODAL -->
<div class="modal modal-black fade" id="userEditModal"
tabindex="-1" role="dialog" aria-labelledby="userEditModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userEditModal">
Edit user
<strong class="text-primary">
{{ userInfo.name }} - {{ userInfo.username }}
</strong>
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<form class="form-horizontal" method="PUT">
<div class="modal-body">
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Username</label>
<div class="col-md-9">
<div class="form-group">
<input type="text" class="form-control" name="username"
v-model="userInfo.username" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Name</label>
<div class="col-md-9">
<div class="form-group">
<input type="text" class="form-control" name="username"
v-model="userInfo.name" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Email</label>
<div class="col-md-9">
<div class="form-group">
<input type="email" name="email" class="form-control"
v-model="userInfo.email" />
</div>
</div>
</div>
<div class="d-flex flex-row">
<label class="col-md-3 col-form-label">Roles</label>
<div class="col-md-9">
<div class="form-group">
<input type="roles" name="roles" class="form-control"
v-model="userInfo.roles" />
</div>
</div>
</div>
</div>
<div class="modal-footer d-flex flex-row">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal"
#click="updateUser()">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
<!-- END EDIT USER MODAL -->
<!-- REMOVE USER MODAL -->
<div class="modal modal-black fade" id="userRemoveModal"
tabindex="-1" role="dialog" aria-labelledby="userRemoveModal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="userRemoveModal">
Confirm delete user
<strong class="text-primary">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>?
</h4>
<button
type="button"
class="close"
data-dismiss="modal"
aria-hidden="true"
>
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
<div class="modal-body h4 text-white text-center mt-4">
Delete user
<strong class="text-danger">
{{ userInfo.username }} - {{ userInfo.name }}
</strong>
?
</div>
<div class="modal-footer d-flex flex-row">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"
#click="removeUser()">
Delete User
</button>
</div>
</div>
</div>
</div>
<!-- END REMOVE USER MODAL -->
<!-- END MODALS -->
</template>
<script>
import axios from "axios";
import InfoButton from ".../components/cores/Buttons.vue";
const API_URL = "http://localhost:8000/api";
export default {
name: "manageUsers",
components: { InfoButton },
data() {
return {
users: [],
newUser: {
name: null,
username: null,
email: null,
password: null,
confirmPassword: null,
roles: null,
},
userInfo: {
id: 0,
name: "",
username: "",
phone: "",
email: "",
password: "",
},
};
},
methods: {
refreshUsers() {
axios.get(`${API_URL}/users/allusers`).then((res) => {
this.users = res.data.data;
});
},
addUser() {
axios
.post(`${API_URL}/users/create`, this.newUser)
.then((res) => {})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
this.$router.push("/manager/users");
},
getUserInfo(user) {
axios
.get(`${API_URL}/users/show/` + user.id)
.then((res) => {
this.userInfo.id = res.data.data.id;
this.userInfo.name = res.data.data.name;
this.userInfo.email = res.data.data.email;
this.userInfo.username = res.data.data.username;
this.userInfo.phone = res.data.data.phone;
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
updateUser() {
axios
.put(`${API_URL}/users/update/${this.userInfo.id}`, {
name: this.userInfo.name,
username: this.userInfo.username,
email: this.userInfo.email,
password: null,
roles: this.userInfo.roles,
})
.then((res) => {
this.refreshUsers();
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
removeUser() {
axios
.delete(`${API_URL}/users/delete/${this.userInfo.id}`)
.then((res) => {
this.refreshUsers();
})
.catch((error) => {
console.log("ERRRR:: ", error.response.data);
});
},
},
mounted() {
this.refreshUsers();
},
};
</script>
I had the same problem and the solution was to send each button to a different function
I'm trying to get a full width button inside my materialize css card and I've achieved the following result so far.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]">
</p>
<div class="mathquill-embedded-latex mathquill-rendered-math"><span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"><br>
<span class="text">Miles to destination</span> <input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span> <input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;">
</div>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</article>
</div>
</div>
</div>
</div>
But the issue is the button is not inside the card and only half. Any help is appreciated.
Add row to the 4th div which is with the class name card-content
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<div class="card teal lighten-4">
<div class="card-content row">
<article id="post-946650" class="post-946650 page type-page status-publish hentry">
<p><input id="id_func_calc" type="hidden" value="[[{"assign":["#_z"],"eval":"#y/#x"}]]"></p>
<div class="mathquill-embedded-latex mathquill-rendered-math">
<span class="text">Travel time(in minutes)</span>
<input id="x" class="oInp" size="3" type="text" autocomplete="off"/><br>
<span class="text">Miles to destination</span>
<input id="y" class="oInp" size="3" type="text"><br>
<span class="text">Avg speed</span>
<input id="_z" class="oInp oOutp" disabled="disabled" size="3" type="text" style="width: 3em;"><br>
<p><input class="clcbtn waves-effect waves-light btn col s12" type="button" value="Solve"></p>
</div>
</article>
</div>
</div>
</div>
</div>
I working on form which has nested form groups & form arrays but I am not able to bind values in ts.
I am new to angular so dont have much clarity on formgroup and form arrays.
below json can have multiple arrays within formgroups and nested form arrays within form group.
Here is the sample example which i want to execute and make below json structure from this form
Json using this form :
{
ip:'1.2.3.4',
create_adjacency:{
customerName:'ABC',
traffic_group:[{
_display_name:'DEF',
traffic_group_limits:{
calls:'23' }
}]
}
}
HTML -
<div class="page-container pb-25 ">
<form [formGroup]="firstFormGroup">
<div class="form-group custom-input select-custom-prime">
<label>IP</label>
<input
placeholder="Select"
formControlName="ip"
/>
</div>
<div class="row mb-20" formGroupName="create_adjacency">
<div class="col-xl-4 col-lg-6 col-md-6">
<div
class="form-group custom-input select-custom-prime"
>
<label>Customer Name</label>
<input
placeholder="Select"
formControlName="customerName"
/>
</div>
</div>
<div formArrayName="traffic_group">
<div class="col-xl-3 col-lg-6 col-md-6">
<div
class="form-group custom-input mr-10 select-custom-prime" >
<label>Traffic group Name</label>
<input
formControlName="_display_name"
/>
</div>
</div>
<table
class="mt-30 table table-striped table-bordered wd-98"
>
<thead>
<tr>
<th>Traffic Group Name</th>
<th>Concurrent Calls</th>
</tr>
</thead>
<tbody formGroupName="traffic_group_limits">
<tr>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
pInputText
autofocus
disabled
type="text"
class="form-control"
/>
</div>
</div>
</td>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
formControlName="calls"
pInputText
autofocus
class="form-control"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
Ts code -
this.firstFormGroup = this.formBuilder.group({
ip: [''],
create_adjacency: this.formBuilder.group({
customerName: ["", Validators.required],
traffic_groups: this.formBuilder.array([this.traffic_groups])
})
});
get traffic_groups(): FormGroup {
return this.formBuilder.group({
_display_name: ["", Validators.required],
traffic_group_limits: this.formBuilder.group({
"call-appearances": ["", Validators.required]
})
});
}
In my opinion, as much angular has their own way of doing this, it might be a little intimidating to a beginner. So I prefer breaking down the formgroups and then constructing the final json from all the forms all together.
.html
<div class="page-container pb-25 ">
<form [formGroup]="firstFormGroup">
<div class="form-group custom-input select-custom-prime">
<label>IP</label>
<input
placeholder="Select"
formControlName="ip"
/>
</div>
<div class="row mb-20" [formGroup]="adjacencyFormGroup">
<div class="col-xl-4 col-lg-6 col-md-6">
<div
class="form-group custom-input select-custom-prime"
>
<label>Customer Name</label>
<input
placeholder="Select"
formControlName="customerName"
/>
</div>
</div>
<div [formGroup]="trafficFormGroup">
<div class="col-xl-3 col-lg-6 col-md-6">
<div
class="form-group custom-input mr-10 select-custom-prime" >
<label>Traffic group Name</label>
<input
formControlName="_display_name"
/>
</div>
</div>
<table
class="mt-30 table table-striped table-bordered wd-98"
>
<thead>
<tr>
<th>Traffic Group Name</th>
<th>Concurrent Calls</th>
</tr>
</thead>
<tbody [formGroup]="trafficGroupLimit">
<tr>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
pInputText
autofocus
disabled
type="text"
class="form-control"
/>
</div>
</div>
</td>
<td>
<div class="">
<div
class="form-group custom-input select-custom-prime"
>
<input
formControlName="calls"
pInputText
autofocus
class="form-control"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
.ts
this.firstFormGroup = this.formBuilder.group({
ip: [''],
create_adjacency: [{}]
});
this.adjacencyFormGroup = this.formBuilder.group({
customerName: ["", Validators.required],
traffic_groups: [[]])
});
this.trafficFormGroup = this.formBuilder.group({
_display_name: ["", Validators.required],
traffic_group_limits: [{}]
});
this.trafficGroupLimit = this.formBuilder.group({
calls: [''],
});
function to create json
createFormJSON() {
this.trafficFormGroup.patchValue({
traffic_group_limits: this.trafficGroupLimit.value
});
this.adjacencyFormGroup.patchValue({
traffic_groups: this.allTrafficGroups // store all traffic groups in this array before patching
});
this.firstFormGroup.patchValue({
create_adjacency: this.adjacencyFormGroup.value,
});
}
I have a VueJS component which populates a table via ajax, than I have a modal form inside component which creates new entries in table.
On modal hide I want to update the table to show new entries.
export default {
created() {
axios.get('/api/v1/customers')
.then(response => {
this.customers = response.data;
});
},
methods: {
store() {
this.form.errors = [];
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
$('#modal-edit-client').modal('hide');
this.$forceUpdate();
})
.catch(error => {
console.log(error)
/*if (typeof error.response.data === 'object') {
this.form.errors = _.flatten(_.toArray(error.response.data));
} else {
this.form.errors = ['Something went wrong. Please try again.'];
}*/
});
},
newUser: function () {
$('#modal-edit-client').modal('show');
},
edit: function () {
alert('edit modal')
}
},
data() {
return {
customers: {},
alert: {
show: false,
type: null,
title: null,
message: null,
},
form: {
scopes: [],
errors: []
}
};
}
}
I tried to use $forceUpdate() but does not seems to work
output template
<template>
<div class="row" v-cloak>
<div class="col-md-12 ">
<div class="panel panel-default custom-panel">
<div class="panel-heading">
<strong>Customers</strong>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input v-on:keyup.enter="filter" type="text" class="form-control input-sm" placeholder="Search Customer" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<a class="btn icon-btn btn-success" id="new__item" href="#" #click="newUser">
<span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span> Add Customer
</a>
</div>
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Firma</th>
<th>Strasse</th>
<th>PLZ</th>
<th>Ort</th>
<th>Tel</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr v-for="customer in customers">
<td>{{ customer.id }}</td>
<td>{{ customer.customer_name }}</td>
<td>{{ customer.customer_street }}</td>
<td>{{ customer.customer_plz }}</td>
<td>{{ customer.customer_city }}</td>
<td>{{ customer.customer_telephone }}</td>
<td><span class="badge bg-green"><i class="fa fa-check"></i></span></td>
<td class="actions">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Edit Client Modal -->
<div class="modal fade" id="modal-edit-client" tabindex="-1" role="dialog">
<div class="spinner"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Add Customer
</h4>
</div>
<div class="modal-body">
<!-- Form Errors -->
<!--<div class="alert alert-danger" v-if="alert" >
<p><strong>Whoops!</strong> Something went wrong!</p>
<br>
</div>-->
<!-- Edit Client Form -->
<form class="form-horizontal" id="modal-create-customer" role="form" method="POST" action="">
<div class="row">
<div class="col-xs-12">
<label for="customer_name" class="control-label">Firmenbezeichnung</label>
<input id="customer_name" type="text" class="form-control" v-model="form.customer_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="sex" class="control-label">Anrede</label>
<select v-model="form.customer_contact_sex" name="title" id="sex" class="form-control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="title" class="control-label">Title</label>
<select v-model="form.customer_contact_title" name="title" id="title" class="form-control">
<option value="">No title</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="name" class="control-label">First Name</label>
<input id="name" type="text" class="form-control" v-model="form.customer_first_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="email" class="control-label">Last Name</label>
<input id="email" type="text" class="form-control" v-model="form.customer_last_name" name="customer_last_name" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="street" class="control-label">Street</label>
<input id="street" type="text" class="form-control" v-model="form.customer_street" name="customer_street" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-2">
<label for="plz" class="control-label">PLZ</label>
<input id="plz" type="text" class="form-control" v-model="form.customer_plz" name="customer_plz" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-4">
<label for="city" class="control-label">City</label>
<input id="city" type="text" class="form-control" v-model="form.customer_city" name="customer_city" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_telephone" class="control-label">Tel.</label>
<input id="customer_telephone" type="text" class="form-control" v-model="form.customer_telephone" name="customer_telephone" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_fax" class="control-label">Fax.</label>
<input id="customer_fax" type="text" class="form-control" name="customer_fax" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_mobile" class="control-label">Mobil</label>
<input id="customer_mobile" type="text" class="form-control" name="customer_mobile" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_email" class="control-label">E-Mail.</label>
<input id="customer_email" type="text" class="form-control" name="customer_email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-12">
<label for="customer_note" class="control-label">Notiz</label>
<textarea name="csutomer_note" id="customer_note" class="form-control"></textarea>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
</form>
</div>
<!-- Modal Actions -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" #click="store">
Register
</button>
</div>
</div>
</div>
</div>
</div>
</template>
As said in the comments, your code looks fine except that you're not actually updating the customers property with anything.
When you're performing the XHR request with Axios, you need to use the response to populate the component, which will automatically update the relevant DOM.
Here is the relevant part of your code that you should modify:
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
// Set the component's customers property to what you get
// in the response
this.customers = response.data.customers;
$('#modal-edit-client').modal('hide');
// You don't need to forceUpdate as Vue will take care of
// rerendering the relevant parts of the DOM
// this.$forceUpdate();
})
Also, considering you're expecting an array of customers to render the table, you should set the customers default value accordingly:
data() {
return {
customers: []
// ...
};
}