last day (14 days later) » 

9:37 AM
0
A: get the form values on the same page after submit the the form in vue.js

user7814783Since you want the inputed values in the form show up af ter the form is successfully submitted Add a property in your data property as below: data(){ return{ showFormValues = false; } } Add a div with the inputed values in paragraph tags be...

 
<div v-show="showFormValues"> <p>date: {{ScheduleInterviewForm.schedule_datetime}}</p> <p>type: {{ScheduleInterviewForm.interview_type_id}}</p> </div> where i ahve to add this with in the template or outside the template
 
@bharathi inside the template below the form in the modal where you want to display it. By the way you are asking inside or outside the template...you cant write html code outside the template tag
 
thank you...it's working..thanks a lot..
i have another doubt..after submit the form my form values dosen't disappear..it stays there only..i want to remove the form values..after submit..and if user enter another details it just edit the before values instead of creating new row..
after submit the values are appearing..and then i close the popup..and i refresh the page..the values are disappearing..i want those values should be there only..
can you please explain me..i am trying to do this..from past 6 hours..it's not working..
 
@bharathi what exactly do you want, i will help you, dont worry
 
oh thank you..after submit the form it showing the values below the form..so that is fine..then after i close the popup..and i refresh the page..the values disappeared..
 
9:37 AM
@bharathi when you refresh the page vue re-renders the component which means it also reseta the objects in you data property back to intial state, if you rally want to save those values then try to persist them by saving in cookies or localstorage
 
how to do that..i have no idea on that one..if it is possible can you please explain me..
 
@bharathi its difficult to explain here, suggest any other idea
 
yeah..ok..
 
This is better
 
is there any another way to do this..
@vamsi krishna what is better?
 
9:42 AM
So what you do is, in the sucess block of your form submission where we set v-show to true ,there save the ScheduleInterviewForm.schedule_datetime, ScheduleInterviewForm.interview_type_id in an object and ten add it to cookies
Saving and retreiving cookies can be learnt here w3schools.com/js/js_cookies.asp
 
the main problem is i dont know how to add it to cookies
 
See the link , its easy
 
yeah..ok..
 
Or you can use this API in your project to save and retrieve cookies github.com/js-cookie/js-cookie
 
so we need to set the cookie right?
in the same page onl
only?
 
9:48 AM
Once you save the object as a cookie, in the created lifecyclehook of yoùr component , you can check whether the cookie is present or not, if it is present, then display it in the modal, if not show the form
Understood?
 
may be no...
i didn't use cookies before..
so i don't know how to use them..
 
Then try it now, the examples in w3schools website are pretty straightforward
 
yup....ok...
i will try..
 
If any doubt i am happy to help
And accepting my answer for yesterdays question would be helpful, only if you feel my answer helped you out
 
yeah..it helpmed a lot..i forgot to accept..
and i have another doubt in my project..
if it is ok...i will explain my problem
 
9:55 AM
Thank you, if any doubts msg mé in stack overflow...
Yup what is it?
 
haa
actually i did pagination and filter thing..so i did filter as i gave 3 input boxes..
 
when user try to enter value in input it display the values depending on the value
with out pressin gany button
pressing any
 
so what i want to do is after those 3 inputs i want to give one button..after entering the values they have to click on the button then only i want to display the values
here is my js code:
const app = new Vue({
el: '#app',
data() {
return {
//candidates: window.data.candidates,

experienceSearch: '',
expectedCtc :'',
profileRole : '',
page: 0,
itemsPerPage: 3,
}
},
components: { Candidate },
methods: {
//custom method bound to page buttons
setPage(page) {
this.page = page-1;
this.paginedCandidates = this.paginate()
},
paginate() {
return this.filteredCandidates.slice(this.page * this.itemsPerPage, this.page * this.itemsPerPage + this.itemsPerPage)
},
},
computed: {
//compute number of pages, we always round up (ceil)
here is my blade.php code:
@extends('layouts.app')

@section('content')


<div class="container">

<b>Experience:</b><input type="text" v-model="experienceSearch">

<b>Expected CTC:<b><input type="text" v-model="expectedCtc">


<b>Profile Role:<b><input type="text" v-model="profileRole">


</div>





<div class="container">
<div id="app">
<div class="row">
<el-row :gutter="12">
<el-col>
<p>View Candidates</p>
</el-col>
</el-row>

<el-row :gutter="12">
<template v-for="c in paginedCandidates">
<el-col :span="6">
<Candidate :c="c" :key="c.id"></Candidate>
actually i tried but if filter is working..pagination is not wroking..if pagination is working filter is not working
 
10:05 AM
Is ="experienceSearch, expectedCtc, profileRole are he 3 values you are talking about
 
yes
exactly
 
Add a if statement to ceck if the 3 fields are filled, then only display the button
 
i already add if right?
 
And in the button click method do as we did yesterday in your question
 
i tried like this
i added my <template v-for="c in paginedCandidates"> pagined candidates is an array in my data
the after
i created like this created: function() {
this.filteredCandidates();
},
after data
and in computed
filteredCandidates() {
//filter out all candidates that have experience less than 10
const filtered = window.data.candidates.filter((candidate) => {
//e.g.
var matches = true;

if (this.experienceSearch ) {
if (candidate.experience != this.experienceSearch) {
matches = false;
}
}

if (this.expectedCtc ) {
if (candidate.expected_ctc != this.expectedCtc) {
matches = false;
}
}

if (this.profileRole ) {
if (candidate.profile_role_id != this.profileRole) {
matches = false;
}
}

return matches;

});
but it's not wroking properly..
r u there?
 
10:18 AM
it difficlt to cmpletely type the code for you
It wold be hepful if you say what you tried and what errors you are getting
 
ok..
i send code right what i tried
 
Any errors?
 
yeah
 
you just keep asking questions on stack overflow
 
yes...
 
10:22 AM
The form part i answeredit, and the page refresh part you asked again, sourabh answered it
 
hahhaa
but it's not wroking
i am waiting for you from morning onwards
 
You just take the answers no upvote, no accepting , you ask again how to do it in th comments
 
but u didnt opened stackoverflow
thats why i asked the question
 
No problem, i want to help,
 
hmm thank you..
 
10:24 AM
but completely wrting code is difficlt
 
yup...ok..
TypeError: this.filteredCandidates is not a function
it showing me this error
 
ok wait a sec
 
ok..
 
You dont have .filteredCandidates in your data property
 
it's there
before i sent js file..
i did like that
 
10:30 AM
Could you put the code in jsfiddle
 
yeah..ok..
 
It will be easy for me to test
 
yeah ok..
give me 3 mins
sorry i added this also in my blade.php code
<button @click.prevent="filteredCandidates">
Filter!
</button>
 
Ok so, finally what is that you want
 
i want to add that button after those 3 input boxes
after click on that button only i want to display results
 
10:44 AM
Yup i am working on it
 
oh..thank you vamsi
 
Ooo u now my name, how
 
it's displaying here
instaed of your userid
 
Ok
I am working on it, can you wait
 
yeah..i will wait..
how much time it wll take
 
11:10 AM
Once have a look at the fiddle
 
ok send me the fiddle link
 
I am asking to look zt the fifddle you sent
 
ok..
 
Y are the input elements put of the div with id app
 
actually i gave that..there si no use of that one
if we remove also there is no error
 
11:13 AM
not put out
 
what?
 
Dint understend?
 
that <div id="app"> i added by mistake
 
Its too confusing...
 
no use of that one
 
11:15 AM
Plese format the code properly, and only thats required ...
 
haa sorry..ok..give me 2 minutes..
 
ok wait
 
yup..ok..
 
11:47 AM
r u there?
 
yeah..i will check
Use of undefined constant inputValues - assumed 'inputValues' (View: /home/gtpl/workspace/glob_hire/resources/views/Consultant/view-candidates.blade.‌​php)
it showing me this error
 
12:03 PM
Nope for me no errors are been shown
Domt copy paste
 
ok.
thank you vamsi krishna thanks a lot..i will try..
 

last day (14 days later) »