I created a career page which is when user select the title of the position that they apply, it will redirect into application form and it will display the title of the position. If they are interested to apply for the position they will enter some input which is their full name, contact and cv. Once they submitted the application, it will send the data into the server include the position that they already applied.
Header.vue
<template>
<div>
<h1 class="title-wrapper">
Application Form
</h1>
<p class="info-wrapper">
You are applying as
<nuxt-link to="/careers">
<u>{{ title }}</u>
</nuxt-link>
</p>
</div>
</template>
<script>
export default {
name: 'Header',
props: {
title: {
type: String,
default: ''
}
}
};
</script>
Form.vue
<form class="app-form" #submit.prevent="onSubmit">
<InputField
v-model="fullName"
label="Full Name"
firequired
required
placeholder="Your full name"
#handleChange="handleChangeName($event)"
/>
<button type="submit">Submit</button>
</form>
Application.vue (Parent)
<div class="contact-wrapper">
<Intro :title="title" />
<Form />
</div>
The validation for submit the form is inside the Form.vue, how to send the title from Header.vue into Form.vue and send it into the server. This is what I've tried
Form.vue
<script>
export default {
name: 'Submit',
template: '<nuxt-link to="/careers"><u>{{ title }}</u></nuxt-link>',
methods: {
onSubmit() {
this.$axios.post('url', {
position:this.title
})
}
};
</script>
And it returns nothing
Related
I'm going to display a search box on my Vue website, but it won't display.
My code is (this in body.vue):
<template>
<div class="searching">
<input type="text" v-model="search" placeholder="Search.." />
</div>
</template>
I put it in the data()
export default {
name: "body",
data() {
return {
search: '',
My App.vue looks like this:
<template>
<div id="app">
<header id="header"></header>
<router-view id="routeView"></router-view>
</div>
</template>
The data() return also contain other stuff. Why can I see my searching box?
I can't pass data from child to parent routers with vue.js.
From few research, including on stack overflow, it is very clear that we must use the $emit() method from the child.
I played around between the documentation, stackoverflow and some youtube tutorials but there is still something I miss and I do wrong.
Below is my router Menubar.vue
<template>
<div id="app" class="container-fluid">
<div #clicked="onClickChild">
<p>login is set to {{ loggedin }}</p>
<p>Route query login {{ this.$route.query.loggedin }}</p>
</div>
<div v-if="!loggedin">
<nav>
<!--<router-link class="btn btn-primary" to="/">Customers</router-link>-->
<router-link class="btn btn-primary" to= "/menubar/login">Login</router-link>
<router-link class="btn btn-primary" to="/menubar/register">Register</router-link>
</nav>
</div>
<div v-else>
<nav>
<!--<router-link class="btn btn-primary" to="/">Customers</router-link>-->
<button class="btn btn-primary" v-on:click="logout()">Logout</button>
<router-link class="btn btn-primary" to="/edit">Edit</router-link>
</nav>
</div>
<br/>
<router-view/>
</div>
</template>
<script>
export default {
name: "menubar",
data(){
return{
loggedin:false,
}
},
created() {
if(this.$route.query.loggedin){
this.loggedin = this.$route.query.loggedin;
}
},
methods: {
logout(){
this.loggedin = false;
},
onClickChild (value) {
this.loggedin = value;
console.log(value) // someValue
}
}
}
</script>
And its child Login.vue
<template>
<div class="submitform">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" required v-model="user.username" name="username">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" required v-model="user.password" name="password">
</div>
<button v-on:click="logUser()" class="btn btn-success">Connect</button>
</template>
<script>
import router from '../../router'
export default {
name: "login",
data(){
return{
user: {
id: 0,
username: "",
password: ""
},
}
},
methods:{
logUser(){
var loggedin = true;
this.$emit('clicked', loggedin);
router.push({ name: "menubar" });
}
}
}
</script>
my router.js
{
path: "/menubar",
name: "menubar",
component: Menubar,
children: [
{
path: "login",
name: "login",
component: Login,
},
{
path: "register",
name: "register",
component: Register,
}
]
}
the console.log should print true or false to give track my params 'loggedin'
Instead, no idea if this is linked, I have this:
[HMR] Waiting for update signal from WDS...
which gives in my mozilla browser (same in Chrome):
The address wasn’t understood
Firefox doesn’t know how to open this address, because one of the following > protocols (view-source, webpack) isn’t associated with any program or is not allowed in this context.
You might need to install other software to open this address."
Thanks in advance for your help.
In your case, the component listening to the event is not a component child:
<div #clicked="onClickChild">[...]</div>
Here the child is a div, however, if you want to be able to listen to an emit
signal from a child component, the listener should be associated with this specific child component. In this case something like:
<Login #clicked="onClickChild">[...]</Login>
However, if you want to pass data from a child to a parent node in the router
you can define a router-view and catch the event like so:
<router-view #clicked="onClickChild" />
From your code, it looks like your child component is emitting the event correctly to the parent. For the error you are receiving in the browser, it's likely to be a typo or a bad URL, as you are doing:
path: "/menubar",
name: "menubar",
component: Menubar,
children: [
{
path: "/menubar/login",
Which will produce a path like /menubar/menubar/login which looks wrong. https://router.vuejs.org/guide/essentials/nested-routes.html
Not too sure what is wrong here, it seems fine to me! I'm simply trying to update the data property display to true when I click the input within my component.
I have passed the data to the slot scope, so can't see that being the issue. It just simply won't update, using a function to toggle it works, however not what I really want to do, seems pointless.
<time-select>
<div slot-scope="{ time }" class="is-inline-block">
<label for="businessHoursTimeFrom"><i class="fas fa-clock"></i> From</label>
<input type="text" name="businessHoursTimeFrom[]" v-model="time" v-on:click="display = true">
</div>
</time-select>
The code behind:
<template>
<div>
<p>{{ display }}</p>
<slot :time="time" :display="display"></slot>
<div class="picker" v-if="display">
<p>Test</p>
</div>
</div>
</template>
<script>
export default {
props: [],
data: function () {
return {
time: '',
display: false
}
},
mounted() {
},
methods: {
}
}
</script>
I have an App.vue where I load a form with input fields (component). Submitting method works but I am not getting any data from the form input field title.
How can I achieve that?
App.vue:
<form v-on:submit.prevent="getFormValues">
<page-header :title="'Banner toevoegen'"></page-header>
<form-input :label="'title'" :labelvalue="'Titel'" :type="'text'" :placeholder="''" :name="'title'" :value="''" :classname="'form-control'" :id="''"></form-input>
<form-input :label="''" :labelvalue="''" :type="'submit'" :placeholder="''" :name="'title'" :value="'banner toevoegen'" :classname="'form-control'" :id="''"></form-input>
</form>
AND method
methods: {
getFormValues (submitEvent) {
this.name = submitEvent.target.elements.title.value
console.log(this.title)
},
Input.vue:
<template>
<div>
<div class="form-group">
<label v-if="label" :for="label" v-html="labelvalue"></label>
<input :type="type" :placeholder="placeholder" :name="name" :value="value" :class="classname" :id="id">
</div>
</div>
</template>
<script>
export default {
props: {
type: String,
placeholder: String,
name: String,
value: String,
classname: String,
id: String,
label: String,
labelvalue: String
}
}
</script>
You can do it using $event variable, it access the original DOM event in an inline statement handler.
So you should have something like this in your form-input:
<template>
<input
v-on:input="updateValue($event)"
type="text"
/>
</template>
<script>
export default {
methods: {
updateValue: function (evt) {
this.$emit('input', evt)
}
}
}
</script>
And in your app.vue (parent component) you may access to that DOM element:
<template>
<div id="app">
<form-input
v-on:input="evt => {value = evt.target.value}"
/>
</div>
</template>
Please take a look to this simple working example https://jsfiddle.net/ricardoorellana/cj6gtsL5/2/
My view blade, you can see this below :
...
<div class="panel-body">
<order-view v-cloak>
<input slot="from-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="from_date" id="datetimepicker" required>
<input slot="to-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="to_date" id="datetimepicker" required>
</order-view>
</div>
...
My order-view component, you can see this below :
<template>
<div>
<div class="col-sm-2">
<div class="form-group">
<slot name="from-date" required v-model="fromDate"></slot>
</div>
</div>
<div class="col-sm-1">
<div class="form-group" style="text-align: center">
-
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<slot name="to-date" required v-model="toDate"></slot>
</div>
</div>
<div class="col-sm-4">
<button v-on:click="filter()" class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return{
fromDate: '',
toDate: ''
}
},
methods: {
filter: function() {
console.log(this.fromDate)
console.log(this.toDate)
}
}
}
</script>
I using v-model like above code
But, when I click the button, the result of
console.log(this.fromDate)
console.log(this.toDate)
is empty
It display empty
Why it does not work?
How can I solve it?
You cannot bind a slot using v-model and expect that Vue will attach that automatically to your slot input, but I can't see any reason why you need to use a slot here anyway. It looks like you just want an input that you can attach custom attributes to and you can do that by passing the attributes as a prop and use v-bind to bind them:
<template>
<div>
<input v-bind="attrs" v-model="fromDate" />
<button #click="filter">filter</button>
</div>
</template>
export default{
props: ['attrs'],
methods: {
filter() {
console.log(this.fromDate)
}
},
data() {
return {
fromDate: ""
}
}
}
new Vue({
el: "#app",
data: {
fromDateAttrs: {
'data-date-format': "DD-MM-YYYY",
title: "DD-MM-YYYY",
type: "text",
class: "form-control",
placeholder: "Date",
name: "from_date",
id: "datetimepicker",
}
}
});
Now you can just pass your attrs as a prop in the parent:
<my-comp :attrs="fromDateAttrs"></my-comp>
Here's the JSFiddle: https://jsfiddle.net/rvederzc/
EDIT
In reference as to how to create a date picker component, here's how I would implement a jQuery datepicker using Vue.js:
<template id="date-picker">
<div>
<input v-bind="attrs" v-model="date" #input="$emit('input', $event.target.value)" v-date-picker/>
</div>
</template>
<script type="text/javascript">
export default {
props: ['attrs'],
directives: {
datePicker: {
bind(el, binding, vnode) {
$(el).datepicker({
onSelect: function(val) {
// directive talk for 'this.$emit'
vnode.context.$emit('input', val);
}
});
}
}
}
}
</script>
You can then bind that with v-model in the parent:
<date-picker v-model="myDate"></date-picker>
Here's the JSFiddle: https://jsfiddle.net/g64drpg6/
Cant expect any javascript technology to be complete before it becomes famous. Going by that, I tried all the recommendations from using moment to vue-datapicker. All recommendations heavily broke design and needed hardcode of the div id's in the vue initialisation under mounted. Cant introduce hacks into my project this way. Messes up design and implementation neatness.
I fixed it using plain old jsp. On Save, I just did this
vuedata.dateOfBirthMilliSecs = $("#dateOfBirth").val() ;
I'll figure out conversion of date format to milliseconds in my java controller.