Im trying to pass some data from a parent component to a child component which is a modal. For some reason, the error thrown to me is "Uncaught TypeError: Cannot set property 'domain' of undefined". I am trying to pass through the parent component item with its key and then finding this element in the parent and then to a data variable in the child component. Can someone give me a clue on what im missing? Thank you!
This is my parent component Domain.vue
<template>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" id="filter" placeholder="Filter the Domains">
</div>
<div class="row content-holder">
<table>
<thead>
<tr>
<th class="client-name">Domain</th>
<th class="client-pm">Client</th>
<th class="client-pm">Add Log on Domain</th>
</tr>
</thead>
<tbody>
<tr v-for="domain in domains" :key="domain.id" :domain="domain" class="tr-table">
<td class="client-name">{{ domain.url }}</td>
<td class="client-pm">{{ domain.client }}</td>
<td class="client-pm center"><i class="fas fa-plus jobs-page" data-toggle="modal" #click="openAdd(domain)"></i></td>
</tr>
</tbody>
</table>
</div>
<Add :openmodal="addActive" #closeRequest='close'></Add>
</div>
</template>
<script>
import axios from 'axios';
let Add = require('./Add.vue');
export default {
name:'Domain',
data(){
return {
addActive:'',
domains: [],
domain: {id:'', url:'', client: ''},
errors:{}
}
},
methods:{
getDomains(){
window.axios.get('/develogger-app/public/api/domains').then(({data})=>{
data.forEach(domain =>{
this.domains.push(domain)
});
});
},
openAdd(key){
this.$children[1].domain = this.domains[key];
this.addActive = 'is-active';
},
save(){
},
close(){
this.addActive = '';
},
},
created(){
this.getDomains();
},
components:{
Add
}
}
</script>
This is Child component Add.vue
<template>
<!-- Modal -->
<div :class="openmodal" class="modal fade" id="exampleModalCenter" tabindex="-1" >
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Create new Log</h5>
<button type="button" class="close">
<i class="fas fa-times" #click="close"></i>
</button>
</div>
<div class="modal-body">
<form method="post">
<input type="hidden" name="_token" :value="csrf">
<input name="website" type="text" id="website" class="form-control" placeholder="Log Title"><br>
<select id="type" class="form-control" name="type"><br>
<option></option>
</select>
<br>
<select id="type" class="form-control" name="type"><br>
<option value="" disabled selected>Type</option>
<option>Client Update</option>
<option>Dev Update</option>
<option>Bug</option>
<option>Style Fix</option>
</select>
<br>
<label class="left" for="description">Log Description:</label>
<textarea class="form-control" rows="5" id="description" name="description"></textarea>
<br>
<div class="left">
<input type="checkbox" name="tell-everyone" id="tell-everyone">
<label for="description">Tell Everyone?</label>
<br>
<input type="checkbox" name="status" id="status" value="checked">
<label for="checked">Resolved and Tested?</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="log-it" type="button" class="btn btn-circle btn-xl" data-dismiss="modal">
<span id="button-content"><b>LOG IT</b></span>
<span id="button-content"><b>FIX IT</b></span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// checked:false,
name:'Add',
props:['openmodal'],
data(){
return{
domain:'',
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
}
},
methods:{
close(){
this.$emit('closeRequest');
}
},
// computed: {
// isComplete () {
// return this.log.title && this.log.domain_id && this.log.type && this.log.description;
// }
// },
}
</script>
You are specifying your data as a function in the main Vue instance. It should be
an object in the main Vue instance:
data: {
....
}
while a function in the component:
data() {
return {...}
}
See the official reference.
You have data as function for both.
Related
Hello, good afternoon. I wanted to see how to get the id of the roles in this case, I can retrieve all the user data in my modal. But I can't get the role back since it belongs to another table and when I ask for it, it brings me the whole table. Since I use a many-to-many relationship
This is my js
$('.table .editBtn').on('click', function (event) {
event.preventDefault();
var href = $(this).attr('href');
$.get(href, function (usuario) {
$('.myForm #idUsuarioEdit').val(usuario.idUsuario);
$('.myForm #nombreEdit').val(usuario.nombre);
$('.myForm #apellidoEdit').val(usuario.apellido);
$('.myForm #emailEdit').val(usuario.email);
$('.myForm #rolesEdit').val(usuario.roles);
});
$('.myForm #editModal').modal();
});
This is my controller
#GetMapping("/editarUsuario")
#ResponseBody
public Usuario editarUsuario(Model model, long idUsuario) throws Exception {
model.addAttribute("listaUsuarios", usuarioService.getAllUsers());
model.addAttribute("roles", rolDao.findAll());
return usuarioService.getUsuarioById(idUsuario);
}
This is my html button
<table id="listaUsuarios" class="table table-bordered table-hover table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Apellido</th>
<th scope="col">E-mail</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr th:each="usuario : ${listaUsuarios}">
<td th:text="${usuario.idUsuario}"></td>
<td th:text="${usuario.nombre}"></td>
<td th:text="${usuario.apellido}"></td>
<td th:text="${usuario.email}"></td>
<td><div class="text-center">
<span th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')} or (${#authorization.expression('hasRole(''ROLE_USER'')')} and ${#httpServletRequest.remoteUser==usuario.email})">
<a class="btn btn-success editBtn" th:href="#{editarUsuario/(idUsuario=${usuario.idUsuario})}">Editar <i class="fas fa-edit"></i></a>
</span>
<span th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}"> |
<a class="btn btn-danger" href="#" th:onclick="'javascript:confirmaEliminar(\''+ ${usuario.idUsuario} +'\');'">Eliminar <i class="fas fa-user-times"></i></a>
</span>
</div>
</td>
</tr>
</tbody>
</table>
This is my modal
<div class="myForm">
<form th:object="${editarUsuario}" th:action="#{/editarUsuario}" method="post">
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Editar usuario</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control" type="hidden" id="idUsuarioEdit" name="idUsuario" />
</div>
<div class="form-group">
<label class="col-form-label" for="nombre">Nombre:</label>
<input class="form-control" type="text" id="nombreEdit" name="nombre" required />
</div>
<div class="form-group">
<label class="col-form-label" for="apellido">Apellido:</label>
<input class="form-control" type="text" id="apellidoEdit" name="apellido" required />
</div>
<div class="form-group">
<label class="col-form-label" for="email">E-mail:</label>
<input class="form-control" type="text" id="emailEdit" name="email" required />
</div>
<div class="form-group">
<label class="col-form-label" for="rol">Rol:</label>
<input class="form-control" type="text" id="rolesEdit" name="roles" required />
<!--<select class="form-control" id="rolesEdit" name="rol">
<option th:each="rol :${roles}" th:value="${rol.idRol}" th:text="${rol.nombre}"></option>
</select>-->
</div>
<!-- <div class="form-group">
<label class="col-form-label" for="rol">Rol:</label>
<select class="form-control" id="rolesEdit" name="roles">
<option th:each="rol :${roles}" th:value="${rol.idRol}" th:text="${rol.nombre}"></option>
</select>
</div>
ERROR MESSAGE
<div class="content">
<div style="text-align: center;" class="alert-danger-registro" th:if="${formErrorMessage}" th:text="${formErrorMessage}">Error Message</div>
-->
</div>
<!--FOOTER-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
<input type="submit" class="btn btn-primary" value="Guardar cambios"/>
</div>
</div>
</div>
</div>
</form>
</div>
And.. my method for edit user
//metodo editar usuario
#Override
public Usuario editarUsuario(Usuario fromUser) throws Exception {
Usuario toUser = getUsuarioById(fromUser.getIdUsuario());
mapUser(fromUser, toUser);
return usuarioDao.save(toUser);
}
//Mapeamos todo menos el password.
protected void mapUser(Usuario from, Usuario to) {
to.setNombre(from.getNombre());
to.setApellido(from.getApellido());
to.setEmail(from.getEmail());
to.setRoles(from.getRoles());
}
currently this is what i receive:
modal edit
I've been trying for a long time but I can't receive the role id, thanks. Greetings
Try to explain where is the real problem, do you use some library or framework ?
You may try to find about how to join tables using the lib or the framework you are currently using.
Or you just have to return the roles you have fetched with the user data, something like :
const allRoles = //fetch roles
const userInfo = //fetch user info
return {userData: userInfo, roles: allRoles}
I have an application in which on deleting one of the registers i receive the message following Vue-warn:
Property or method "key" 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.
Only initializing the variable key on the data/return didn't actually solve my problem.
Another thing i noticed is that the data is deleted from the DB, the field log.title and log.user are deleted from the the logs list straight away but the other half of the row still remain on the view until I leave and reenter the Log component. Not sure if the above Vue-warn has something to do with this delete/viewing bug, but it might be.
I would appreciate if someone could give me a clue on what is going on?
This is my Log.vue:
<template>
<div class="container">
<log-show-detail v-if="logModalOpen" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" #closeRequest='close'> </log-show-detail>
<log-edit v-if="editModalOpen" :logId="logId" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" #closeRequest='close'></log-edit>
<div class="form-group">
<!-- <input type="text" class="form-control" id="filter" placeholder="Filter the Logs"> -->
<br>
<i class="fas fa-plus jobs-page" data-toggle="modal" data-target="#exampleModalCenter"></i>
<div v-if="isLoading" class="loading-image">
<img src="/develogger-app/public/img/dev-tick.gif" alt="">
</div>
</div>
<div class="row content-holder">
<table class="table">
<thead>
<tr class="left-align">
<th class="">Log</th>
<th class="">User</th>
<th class="center-align" style="text-align:right">Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="log in logs" :key="log.id" :log="log" #deleteLog="deleteLog" class="tr-table">
<td class="client-name" #click="openLogs(log.id,log.user,log.title,log.type,log.description,log.created_at)">{{ log.title }}</td>
<td class="" >{{ log.user }}</td>
<td class="client-pm" style="text-align:right">{{moment(log.created_at).fromNow()}}</td>
<!-- <td #click="openEdit(log.id,log.user,log.title,log.type,log.description,log.created_at)"><i class="fas fa-edit"></i></td> -->
<td #click="deleteLog(key,log.id)"><i class="fas fa-trash-alt"></i></td>
</tr>
</tbody>
</table>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Create new Log</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="fas fa-times"></i>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="_token" :value="csrf">
<input v-model="log.title" name="website" type="text" id="website" class="form-control" placeholder="Log Title"><br>
<select v-model="log.domain_id" id="type" class="form-control" name="type"><br>
<option value="" disabled selected>Website</option>
<option value="1">aerogen.com</option>
<option value="4">ardsolus.ie</option>
<option value="8">blacklionrealstate.fund</option>
<option value="11">blanchadstowncentre.ie</option>
<option value="7">chathamandking.ie</option>
<option value="5">clayfarm.ie</option>
<option value="10">edenplaza.ie</option>
<option value="6">hardwicke.ie</option>
<option value="2">kennedywilsonresidential.ie</option>
<option value="3">loulerie.ie</option>
<option value="9">procert.ie</option>
</select>
<br>
<select v-model="log.type" id="type" class="form-control" name="type"><br>
<option value="" disabled selected>Type</option>
<option>Client Update</option>
<option>Dev Update</option>
<option>Bug</option>
<option>Style Fix</option>
</select>
<br>
<label class="left" for="description">Log Description:</label>
<textarea v-model="log.description" class="form-control" rows="5" id="description" name="description"></textarea>
<br>
<div class="left">
<input v-model="tell" type="checkbox" name="tell-everyone" id="tell-everyone">
<label for="description">Tell Everyone?</label>
<br>
<input v-model="checked" type="checkbox" name="status" id="status" value="checked">
<label for="checked">Resolved and Tested?</label>
</div>
</div>
<div class="modal-footer">
<button :disabled="!checked || !isComplete" id="log-it" type="button" class="btn btn-circle btn-xl" data-dismiss="modal" #click="save">
<span v-if="checked && isComplete" id="button-content"><b>LOG IT</b></span>
<span v-else id="button-content"><b>FIX IT</b></span>
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
import moment from 'moment';
import ShowDetail from './ShowDetail.vue';
import EditLog from './EditLog.vue';
export default {
name:'Log',
data(){
return {
key:0,
logModalOpen: false,
editModalOpen: false,
isLoading:'',
checked:false,
tell:false,
logs: [],
log: {id:'', domain_id:'', title: '', type: '', description: ''},
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
errors:{},
//passing those variables to ShowDetails component
logId:'',
logUser:'',
logTitle:'',
logType:'',
logDescription:'',
logDate:'',
}
},
methods:{
getLogs(){
window.axios.get('/develogger-app/public/api/logs').then(({data})=>{
data.forEach(log =>{
this.logs.push(log)
});
});
},
moment,
save(){
this.isLoading = true;
if(this.log.title.length > 0 && this.log.domain_id.length > 0 && this.log.type.length > 0 && this.log.description.length > 0){
window.axios.post('/develogger-app/public/api/logs',this.log).then((response) => {
this.logs.push(response.data)
this.log.domain_id = '';
this.log.title = '';
this.log.type = '';
this.log.description = '';
this.checked = false;
setTimeout(() => {
this.isLoading = false;
}, 800);
}).catch((error) => this.errors = error.response.data.errors)
}
},
openLogs(id,user,title,type,description,date){
this.logId = id;
this.logUser = user;
this.logTitle = title;
this.logType = type;
this.logDescription = description;
this.logDate = date;
this.logModalOpen = true;
},
openEdit(id,user,title,type,description,date){
this.logId = id;
this.logUser = user;
this.logTitle = title;
this.logType = type;
this.logDescription = description;
this.logDate = date;
this.editModalOpen = true;
},
close(){
this.logModalOpen = false;
this.editModalOpen = false;
},
deleteLog(key,id){
if(confirm("Are you sure you want to delete?")){
this.isLoading = true;
window.axios.delete(`/develogger-app/public/api/logs/${id}`,this.log).then((response) => {
this.logs.push(response.data)
this.logs.splice(key,1);
setTimeout(() => {
this.isLoading = false;
}, 800);
this.logId = '';
}).catch((error) => this.errors = error.response.data.errors)
}
}
},
created(){
this.getLogs();
},
computed: {
isComplete () {
return this.log.title && this.log.domain_id && this.log.type && this.log.description;
}
},
components:{
'log-show-detail': ShowDetail,
'log-edit': EditLog,
}
}
</script>
Change:
v-for="log in logs" to "v-for="(log, index) in logs"
<td #click="deleteLog(key, log.id)"... to <td #click="deleteLog(index, log.id)"
<tbody>
<tr v-for="(log, index) in logs" :key="log.id" :log="log" #deleteLog="deleteLog" class="tr-table">
<td class="client-name" #click="openLogs(log.id,log.user,log.title,log.type,log.description,log.created_at)">{{ log.title }}</td>
<td class="" >{{ log.user }}</td>
<td class="client-pm" style="text-align:right">{{moment(log.created_at).fromNow()}}</td>
<!-- <td #click="openEdit(log.id,log.user,log.title,log.type,log.description,log.created_at)"><i class="fas fa-edit"></i></td> -->
<td #click="deleteLog(index,log.id)"><i class="fas fa-trash-alt"></i></td>
</tr>
</tbody>
I am creating an alert component for a CRUD app using Vue.js. I want a message to be passed to another component once data has been saved. Currently I am trying to pass this data in $router.push like this this.$router.push({path: '/', query: {alert: 'Customer Added'}}) Then access this data in another component. However this is not working as expected, instead the data is passed into the url.
This is the component which saves the data, Add.vue
<template>
<div class="add container">
<Alert v-if="alert" v-bind:message="alert" />
<h1 class="page-header">Add Customer</h1>
<form v-on:submit="addCustomer">
<div class="well">
<h4>Customer Info</h4>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" placeholder="First Name"
v-model="customer.first_name">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name"
v-model="customer.last_name">
</div>
</div>
<div class="well">
<h4>Customer Contact</h4>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" placeholder="Email" v-model="customer.email">
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" placeholder="Phone" v-model="customer.phone">
</div>
</div>
<div class="well">
<h4>Customer Location</h4>
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Address" v-model="customer.address">
</div>
<div class="form-group">
<label>City</label>
<input type="text" class="form-control" placeholder="City" v-model="customer.city">
</div>
<div class="form-group">
<label>State</label>
<input type="text" class="form-control" placeholder="State" v-model="customer.state">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
<script>
import Alert from './Alert'
export default {
name: 'add',
data () {
return {
customer: {},
alert:''
}
},
methods: {
addCustomer(e){
if(!this.customer.first_name || !this.customer.last_name ||
!this.customer.email){
this.alert = 'Please fill in all required fields';
} else {
let newCustomer = {
first_name: this.customer.first_name,
last_name: this.customer.last_name,
phone: this.customer.phone,
email: this.customer.email,
address: this.customer.address,
city: this.customer.city,
state: this.customer.state
}
this.$http.post('http://slimapp.dev/api/customer/add',
newCustomer)
.then(function(response){
this.$router.push({path: '/', query: {alert: 'Customer
Added'}})
});
e.preventDefault();
}
e.preventDefault();
}
},
components: {
Alert
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only
-->
<style scoped>
</style>
This the alert component, Alert.vue
<template>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span></button>
{{message}}
</div>
</template>
<script>
export default {
name: 'alert',
props: ['message'],
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
And this is the component where the alert is to be viewed, Customers.vue
<template>
<div class="customers container">
<Alert v-if="alert" v-bind:message="alert" />
<h1 class="page-header">Manage Customers</h1>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="customer in customers">
<td>{{customer.first_name}}</td>
<td>{{customer.last_name}}</td>
<td>{{customer.email}}</td>
<td></td></tr>
</tbody>
</table>
</div>
</template>
<script>
import Alert from './Alert';
export default {
name: 'customers',
data () {
return {
customers: [],
alert: ''
}
},
methods: {
fetchCustomers(){
this.$http.get('http://slimapp.dev/api/customers')
.then(function(response){
this.customers = (response.body);
});
}
},
created: function(){
if (this.$route.params.alert) {
this.alert = $route.params.alert
}
this.fetchCustomers();
},
updated: function(){
this.fetchCustomers();
},
components: {
Alert
}
}
How do I solve this?
It is not possible to pass data through vue-router the way you want to. You only can pass parameters like this:
Route definition:
{ path: '/products/:id/edit', name: 'products.edit', component: ProductForm },
And then you can get the parameter with this.$route.params.id
Or you can do:
this.$router.push({name: 'products.index', params: { id: 1 }})
I suggest you to add a GET parameter like ?success=true or show an alert with sweetalert for example before pushing the new route.
A weird solution is to set the value to store/local_storage and retrieve and destroy it from the store/local_storage when the destination page loads.
I am getting up the details in a form for a hotel entry with basic details and viewing it in Room.vue. The created values were displayed here but here i need to give edit option for the filled details. When i click the edit, the page should redirect to RoomsEdit.vue and i should get the filled up contents in that page with form inputs. For that i have tried the following codes but nothing solves my issue.. Kindly have a go through and help me in solving the issue.
Room.vue:
<table class="table table-striped table-hover rooms-table">
<thead>
<tr>
<td>Title<i class="fa fa-sort"></i></td>
<td>Sub Title<i class="fa fa-sort"></i></td>
<td> Edit </td>
<td> Delete </td>
</tr>
</thead>
<tbody>
<tr v-for="room in items">
<td>{{ room.title }}</td>
<td>{{ room.subtitle }}</td>
<td>
<router-link class="btn btn-primary" v-bind:to="'rooms/edit/'+id">Edit</router-link>
</td>
<td>
<button class="btn btn-primary" v-on:click="deleteRoom(room)">Delete</button>
</td>
</tr>
</tbody>
</table>
Here i am giving edit option and making a redirect to edit page..
Script of Rooms.vue:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
}
}
},
methods: {
deleteRoom: function (room) {
var index = this.items.indexOf(room);
this.items.splice(index, 1);
}
},
mounted() {
axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
}
}
</script>
RoomsEdit.vue:
<form #submit.prevent="updateItems" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
<span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
</div>
</div>
<div class="form-group">
<label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
<span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
</div>
</div>
</form>
Script of RoomsEdit:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
},
errors: {
}
}
},
methods:{
fetchRoom(id){
axios.get(config.apiDomain+'/Rooms').then((response)=>this.items = response.data);
},
updateItems(e){
axios.put(config.apiDomain+'/Rooms/edit'+this.$route.params.id,this.itemsData).then(response=>{
this.this.itemsData = "";
this.$router.push('/admin/rooms');
}).catch(error=>{
this.errors = error.response.data;
});
}
},
created: function() {
this.fetchRoom(this.$route.params.id);
}
}
</script>
RoomsCreate.vue:
<form #submit.prevent="addItems" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Title<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="title" class="form-control" id="title" v-model="itemsData.title">
<span class="text-danger">{{ errors.title?errors.title[0]:"" }}</span>
</div>
</div>
<div class="form-group">
<label for="subtitle" class="col-sm-2 control-label">Subtitle<span class="red">*</span></label>
<div class="col-sm-6">
<input type="text" name="subtitle" class="form-control" id="subtitle" v-model="itemsData.subtitle">
<span class="text-danger">{{ errors.subtitle?errors.subtitle[0]:"" }}</span>
</div>
</div>
Script of RoomsCreate.vue:
<script>
import config from '../../../config';
export default {
data(){
return{
items: [],
itemsData:{
title : '',
subtitle : '',
},
errors: {
}
}
},
methods:{
addItems(){
axios.post(config.apiDomain+'/Rooms',this.itemsData).then(response=>{
this.this.itemsData = "";
this.$router.push('/admin/rooms');
}).catch(error=>{
this.errors = error.response.data;
});
}
}
</script>
The issue i am facing is when i click the edit in Room.vue, it redirects to the RoomsEdit.vue where i am not getting the values that was already created, i need to get those value when i go to RoomsEdit.vue there i should edit and update the content.
//here we crate the module for the CRUD application here
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
$scope.user =[];
$scope.one = [];
//here we create the myService function for show the Dmmt array
$scope.user = myService.show();
console.log($scope.user);
//here we create the saveUser function for push the item into the list
$scope.saveUser = function(){
var data =
{
eid:$scope.user.eid,
email:$scope.user.email,
city:$scope.user.city,
salary:$scope.user.salary,
date:$scope.user.date,
}
console.log(data);
//here we create will pass the user data to the myService of the show2
$scope.user =myService.show2(data);
//Here we clear the form data with the help of the id
document.getElementById("clear").reset();
//Here we clear the form data without function
// $scope.user.eid ="";
// $scope.user.email ="";
// $scope.user.city ="";
// $scope.user.salary ="";
// $scope.user.date ="";*/
}
//Calling setParam function for the particular userDetails.
$scope.setParam = function(index){
$scope.one = $scope.user[index];
console.log($scope.one);
}
//here we delete the deleteUser function for remove the item into the lsit
$scope.deleteUser = function(index) {
$scope.result3 =myService.show3(index);
console.log($scope.result3);
}//close contrller here
$scope.clearFilter =function() {
$scope.user= "";
}
});
//Declare the services
//her e we crete the myService function in which we declare the static that will be display in the
//index.html page
app.service("myService",function(){
var employee =[];
var message="";
//here we create the show function for declare dynamic array & display in the home page of the user
this.show = function(){
employee =
[
{
eid:"Kapil sssssss",
email:"harry#yahoo.com",
salary:12000,
city:"Indore",
date:"2014-10-19",
img:"./images/download.png"
},
{
eid:"pooooo",
email:"harry#yahoo.com",
salary:5000,
city:"Us",
date:"2014-10-28",
img:"../images/user.jpg"
},
{
eid:"ddsa",
email:"harry#yahoo.com",
salary:120,
city:"Bhopal",
date:"2014-10-24",
img:"./images/avtar.jpg"
},
{
eid:"dsaddaPotter",
email:"harry#yahoo.com",
salary:1000,
city:"Agar-malwa",
date:"2014-10-29",
img:"./images/images.jpg"
},
{
eid:"sadadasdasdasdsadsads54454",
email:"harry#yahoo.com",
salary:25000,
city:"Indore",
date:"2014-10-10",
img:"./images/WP_16 September 2015_qstore.jpg"
},
{
eid:"Gotm Potter",
email:"harry#yahoo.com",
salary:2000,
city:"Playboy",
date:"2014-10-03",
img:"./images/download (1).png"
},
{
eid:"Harry a4644464654s Potter",
email:"harry#yahoo.com",
salary:35000,
city:"Agar",
date:"2014-10-19",
img:"./images/download.png"
},
{
eid:"mMayank rawal",
email:"harry#yahoo.com",
salary:5000,
city:"Ujjain",
date:"2014-10-28",
img:"../images/user.jpg"
},
{
eid:"Gotm Soni",
email:"gotm#yahoo.com",
salary:2000,
city:"Dewas",
date:"2014-10-24",
img:"./images/avtar.jpg"
},
{
eid:"Deepsh thakur",
email:"harry#yahoo.com",
salary:12000,
city:"Australia",
date:"2014-10-29",
img:"./images/images.jpg"
},
{
eid:"Peter Potter",
email:"harry#yahoo.com",
salary:5000,
city:"Harmaini",
date:"2014-10-10",
img:"./images/WP_16 September 2015_qstore.jpg"
},
{
eid:"kapil Soni",
email:"kapil#yahoo.com",
salary:2000,
city:"Playboy",
date:"2014-10-03",
img:"./images/download (1).png"
}
]
return employee;
}
//here we create the show2 function that will be received our data from the contoller
//& the push into the array of the employee
this.show2 = function(data){
employee.push(data);
message="push ho gy";
return employee;
}
//here we create the show3 function that will be remove user from the list
//& through the index of the list
this.show3 = function(index){
employee.splice(index,1); }
}
);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="custom.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- include the angularjs files here-->
<script src="angular.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="app/controller.js"></script>
<script src="app/service.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
individual files as needed -->
</head>
<body ng-controller="myCont">
<div class="jumbotron">
<div class="container">
<button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal
<br>
<input type="checkbox" data-ng-model='ok.type2' data-ng-true-value="'Indore'" data-ng-false-value=''/> Indore<br>
<input type="checkbox" data-ng-model='ok.type3' data-ng-true-value="'Ujjain'" data-ng-false-value=''/>Ujjain
<br>
<input type="checkbox" data-ng-model='ok.type4' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
<select ng-model="search">
<option value="Bhopal">Bhopal</option>
<option value="London">London</option>
<option value="Australia">Australia</option>
</select>
<button class="btn btn-succes btn-md pull-right" id="clear-filter" ng-click="clearFilter()" type="button">Clear Filter</button>
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
<div class="input-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="alert alert-info" ng-if="message">
Info×.
</div>
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>EmployeenName</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | filter:ok.type2 | filter:ok.type3 | filter:ok.type4 | orderBy:'salary' "
onclick="document.getElementById('id01').style.display='block'"
ng-click ="setParam($index)">
<td style="max-height:61px;"><img src={{x.img}}></img></td>
<td>{{x.eid}}</td>
<td>{{x.email}} </td>
<td>{{x.salary| currency}}</td>
<td>{{x.city}}</td>
<td>{{x.date | date:'dd/mm/yy'}}</td>
<div style="float:right; margin-top:8px;">
Total Count after Filtered-{{filtered.length}}</p>
</div>
<td>
<button type="button" class="btn btn-info" ng-click="isEditForm=true;">edit</button>
</td>
<td ng-show="isEditForm">
<lable>Name</label><input ng-model="x.eid"/><br>
<lable>Email</label><input ng-model="x.email"/><br>
<lable>salary</label><input ng-model="x.salary"/><br>
<lable>city</label><input ng-model="x.city"/><br>
<lable>date</label><input ng-model="x.date"/><br>
<button ng-click="isEditForm=false;">SAVE HERE</button>
</td>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
//here we will provide the id for clear data
<form name="newUser" id="clear" class="user" class="form-horizontal">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class ="UpperText" class="modal-title" >New User Registration</h4>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="eid" ng-model="user.eid" placeholder="Enter Name" ng-minlength ="3" ng-maxlength="5">
<span class="danger" ng-show="newUser.eid.$touched && newUser.eid.$pristine" class="help-block">Enter EId</span>
<span class="danger" ng-show="newUser.eid.$error.minlength" class="help-block">Enter min 3 digits.</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Enter Email" required>
<span class="danger" ng-show="newUser.email.$touched && newUser.email.$pristine" class="help-block">Enter Email</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" style="white-space: nowrap;">Select Country:</label>
<div class="col-sm-10">
<select class="form-control countries" ng-model="user.city" id="countryId sel1">
<option value="">Select City</option>
<option value="Indore">Indore</option>
<option value="Bhopal">Bhopal</option>
<option value="Ujjain">Ujjain</option>
</select>
</div>
<!-- <div class="form-group">
<label class="control-label col-sm-2">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city">
<span class="danger" ng-show="newUser.city.$touched && newUser.city.$pristine" class="help-block">
<span>Enter City</span>
</div>
</div> -->
<div class="form-group">
<label class="control-label col-sm-2">Salary</label>
<div class="col-sm-10">
<input type="number" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
<span class="danger" ng-show="newUser.salary.$touched && newUser.salary.$pristine" class="help-block">Enter Salary</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" data-dismiss="modal"
ng-click="saveUser()" ng-disabled="newUser.$invalid" >
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is clo sed-->
</form>
<!-- Declare another model is declare for edit Modal -->
<!--Here we creat the delete user model for dlete the user -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Are R Want to Delete </h4>
</div>
<div class="modal-body">
<strong style="color:blue;">
You re going to delete the {{one.eid}}</strong>
</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is closed-->
</div>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px">
<div class="w3-center"><br>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">×</span>
<img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top">
</div>
<form class="w3-container" action="form.asp">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
<tr>
<td>{{one.eid}}</td>
<td>{{one.email}}</td>
<td>{{one.salary}}</td>
<td>{{one.city}}</td>
<td>{{one.date}}</td>
<span class="btn btn-info">Follow Here</span>
</table>
</div>
</form>
</div>
</div>
</div>
</body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</html>
I have to apply the filter with checkbox in such case checkbox filter is working properly and list is properly filtered but after that i have click on the Reset button to reset all the JSON data but in my case all data is cleared how to do this functionality.
You need to create a deep copy of your data and then on hitting reset reassign it.
angular.copy(source, [destination]);