I have a vue component that is performing a series of conditionals to check if there is previous data when editing a form. Since the form is being edited there is always previous data but if I type something into the input field and click the save button, my newly typed input is not being persisted but rather the same old data is remaining. I understand that it is happening because the v-if condition is always true but I cannot think of a way to modify the condition if the user types new data in to replace it. The original job is being passed in as a prop which contains the old/original data.
A conditional from my vue:
<div v-if="job.title">
<input :value="job.title" id="title" name="title" type="text" required>
</div>
<div v-else>
<input v-model="newJob.title" id="title" name="title" type="text" required>
</div>
props: {
route: String,
job: Object,
},
data() {
return {
newJob: {
title: ''
},
}
},
So when I type new information the v-model for the newJob is not being updated in the vue dev tools. How do I get the newJob field to update IF the user types something in, otherwise continue to save the old/original value that was in the edit form when the page loaded.
You only need
<input v-model="newJob.title" id="title" name="title" type="text" required>
and
props: {
job: Object,
},
data() {
return {
newJob: {
title: this.job.title || "",
},
};
},
One approach would be to use a property with an object as its default value rather than a prop and a data value:
<input :value="job.title" id="title" name="title" type="text" required>
and
job: {
type: Object,
default: function () {
return {
title: '',
}
}
},
Related
I am building a Vue.js application that allows a user to make and view a feed of products.
I have a parent element NewFeed which allows a user to have a name for their feed, and then allows a user to push products into this feed.
The child element NewProduct allows the user to input data for the product, then pushes into the parent's products array. I have noticed that every time I push a new product into the array, every element in the array is changed to be the value of the new element.
How do I change this so that the elements remain as they were originally input?
NewFeed (Parent Element):
Vue.component('NewFeed', {
data: function() {
return {
newFeed: {
name: "",
products: []
},
}
},
methods: {
addProduct: function(p) {
p.id = this.pushedProducts;
this.newFeed.products.push(p);
}
},
template: `
<div class="">
<label for='feedNameInput'/>Feed Name: </label>
<input id='feedNameInput' v-bind:value='newFeed.name' v-on:input='newFeed.name = $event.target.value'/> <br>
<ViewProduct v-for='product in newFeed.products' :key='product.id'></ViewProduct>
<NewProduct v-on:pushProduct='addProduct($event)'></NewProduct>
<button v-on:click='pushNewFeed'>Add Feed</button>
</div>
`});
NewProduct (Child Element)
Vue.component('NewProduct', {
data: function() {
return {
newProduct: { id: 0 }
}
},
methods: {
addProduct: function() {
this.$emit('pushProduct', this.newProduct);
this.newProduct.id++;
}
},
template: `
<div class='newProduct'>
<label for='productNameInput'/>Product Name: </label>
<input id='productNameInput' v-bind:value='newProduct.name' v-on:input='newProduct.name = $event.target.value'/> <br>
<label for='productOriginalPriceInput'>Original Price: </label>
<input id='productOriginalPriceInput' v-bind:value='newProduct.originalPrice' v-on:input='newProduct.originalPrice = $event.target.value'/><br>
<label for='productNewPrice'>New Price: </label>
<input id='productNewPrice' v-bind:value='newProduct.newPrice' v-on:input='newProduct.newPrice = $event.target.value'/><br>
<label for='productDiscountAmount'>Discount Amount: </label>
<input id='productDiscountAmount' v-bind:value='newProduct.discountAmount' v-on:input='newProduct.discountAmount = $event.target.value'/><br>
<label for="productImage">Upload Image: </label>
<input type='file' accept='image/*' id='productImage' v-bind:file='newProduct.imageFile' v-on:change='newProduct.imageFile = $event.target.files[0];'/><br><br><br>
<button v-on:click="addProduct">Add Product</button>
</div>
`});
This happens because the child component emits the same object reference each time (JavaScript objects are passed by reference). So all of the emitted objects are the same object. You have to create a brand new object each time. Maybe the simplest way to do that is to reset the child object right after you emit:
addProduct: function() {
this.$emit('pushProduct', this.newProduct);
const id = this.newProduct.id + 1;
this.newProduct = { id }
}
I have a Vue component that contains a form that will send an email.
I am having an issue with displaying a default value in the input field. When the page loads I want the email input field to display the user's default email address and only change the value if the user over-writes it with a new email.
I know you can't have v-bind and v-model on the same <input> so how would I go about accomplishing this task?
<input
v-model="emailAddress"
:value="emailAddress"
type="email"
name="email"
id="email-field"
/>
export default {
props: { defaultEmail: String },
data() {
return {
emailAddress: this.defaultEmail || ''
};
}
}
You only need v-model to bind the input value:
const emailComponent = Vue.component('emailComponent', {
template: '#emailComponent',
data () {
return {
emailAddress: this.defaultEmail || ''
}
},
props: { defaultEmail: String },
});
new Vue({
el: "#app",
components: { emailComponent }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<email-component default-email="my email"/>
</div>
<template id="emailComponent">
<input
v-model="emailAddress"
type="email"
name="email"
id="email-field"
/>
</template>
v-model does the same thing as
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
So you do not need value binding, you can remove it just leave v-model.
Check vue doc for more info: https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components
The objective: Vue component input-address has to be inside Vue component mail-composer and display a list of addresses only when someone click Address Book button. When someone click one of displayed mails or fill the To field by hand, createdmail.to has to get the value and I have to hide the list of addresses.
Vue component mail-composer. This component receives a list of addresses. (Everything is working here, I think the only part that is not working properly is v-model inside input-address tag)
Vue.component('mail-composer', {
props: ['addressesbook'],
methods: {
send: function(createmail) {
this.$emit('send', createmail);
}
},
template:
`
<div>
<input-address :addresses="addressesbook" v-model="createmail.to"></input-address>
<p><b>Subject: </b><input type="text" v-model="createmail.subject"></input></p>
<p><b>Body: </b><textarea v-model="createmail.body"></textarea></p>
<button #click="send(createmail)">Send</button>
</div>
`,
data(){
return{
createmail:{
to: '',
subject: '',
body: ''
}
}
}
});
The other Vue component is this one, which is in the same file. (I think all problems are here).
I need to display the list of addresses only when someone click Address Book button, and I have to hide it when someone click again the button or one of the emails which are in the list. When someone clicks a mail from list, the createmail.to property from the mail-composer has to get the value of the mail , also if I decide to put the mail by hand it has to occurs the same.
Vue.component('input-address',{
props:["addresses"],
template:
`
<div>
<label><b>To: </b><input type="text"></input><button #click="!(displayAddressBook)">Address Book</button></label>
<ul v-if="displayAddressBook">
<li v-for="address in addresses">
{{address}}
</li>
</ul>
</div>
`,
data(){
return{
displayAddressBook: false
}
}
})
There're some errors in your code:
#click="!(displayAddressBook)" should be #click="displayAddressBook = !displayAddressBook" - the first really does nothing (interesting), the second (suggested) sets the value of displayAddressBook to the opposite it has currently.
the input-address component does not really do anything with the input field (missing v-model)
the changes in the child component (input-address) are not sent back to the parent (added a watcher to do that in the child component)
the parent component (mail-composer) has to handle the values emitted from the child (added the #address-change action handler)
the v-for in your input-address component does not have a key set. Added key by using the index for it (not the best solution, but easy to do).
just put createmail.to: {{ createmail.to }} at the end of MailComposer, so you can see how it changes
Suggestions
always use CamelCase for component names - if you get used to it, then you get less "why is it not working?!" moments
watch for typos: createmail doesn't look good - createEmail or just simply createemail would be better (ok, it doesn't look so nice - maybe you should choose a totally different name for that)
Vue.component('InputAddress', {
props: ["addresses"],
data() {
return {
displayAddressBook: false,
address: null
}
},
template: `
<div>
<label><b>To: </b>
<input
type="text"
v-model="address"
/>
<button
#click="displayAddressBook = !displayAddressBook"
>
Address Book
</button>
</label>
<ul v-if="displayAddressBook">
<li
v-for="(address, i) in addresses"
:key="i"
#click="clickAddressHandler(address)"
>
{{address}}
</li>
</ul>
</div>
`,
watch: {
address(newVal) {
// emitting value to parent on change of the address
// data attribute
this.$emit('address-change', newVal)
}
},
methods: {
clickAddressHandler(address) {
// handling click on an address in the address book
this.address = address
this.displayAddressBook = false
}
}
})
Vue.component('MailComposer', {
props: ['addressesbook'],
data() {
return {
createmail: {
to: '',
subject: '',
body: ''
}
}
},
methods: {
send: function(createmail) {
this.$emit('send', createmail);
},
addressChangeHandler(value) {
this.createmail.to = value
}
},
template: `
<div>
<input-address
:addresses="addressesbook"
v-model="createmail.to"
#address-change="addressChangeHandler"
/>
<p>
<b>Subject: </b>
<input
type="text"
v-model="createmail.subject"
/>
</p>
<p>
<b>Body: </b>
<textarea v-model="createmail.body"></textarea>
</p>
<button #click="send(createmail)">Send</button><br />
createmail.to: {{ createmail.to }}
</div>
`
});
new Vue({
el: "#app",
data: {
addressesbook: [
'abcd#abcd.com',
'fghi#fghi.com'
]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<mail-composer :addressesbook="addressesbook" />
</div>
I'm making a component which is a wrapper around a checkbox (I've done similar with inputs of type 'text' and 'number') but I cannot get my passed in value to bind correctly.
My component is:
<template>
<div class="field">
<label :for="name" class="label">
{{ label }}
</label>
<div class="control">
<input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
</div>
<p v-show="this.hasErrors" class="help has-text-danger">
<ul>
<li v-for="error in errors" :key="error">{{ error }}</li>
</ul>
</p>
</div>
</template>
<script>
export default {
name: 'check-edit',
props: {
value: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
errors: {
type: Array,
default: () => []
}
},
mounted () {
},
computed: {
listeners () {
return {
// Pass all component listeners directly to input
...this.$listeners,
// Override input listener to work with v-model
input: event => this.$emit('input', event.target.value)
}
},
hasErrors () {
return this.errors.length > 0
}
},
}
</script>
I've imported it globally; and am invoking it in another view by doing:
<check-edit name="ShowInCalendar" v-model="model.ShowInCalendar" label="Show in calendar?" :errors="this.errors.ShowInCalendar"></check-edit>
My model is in data and the property ShowInCalendar is a boolean and in my test case is true. So when I view the page the box is checked. Using the Vue tools in firefox I can see the model.ShowInCalendar is true, and the box is checked. However, when I click it the box remains checked and the value of ShowInCalendar changes to 'on', then changes thereafter do not change the value of ShowInCalendar.
I found this example here: https://jsfiddle.net/robertkern/oovb8ym7/ and have tried to implement a local data property for it but the result is not working.
The crux of what I'm trying to do is have the initial checkstate of the checkbox be that of ShowInCalendar (or whatever property is bound via v-model on the component) and then have that property be update (to be true or false) when the checkbox is checked.
Can anyone offer me any advice please?
Thank you.
You should not $emit event.target.value, it's the value of the checkbox, it's not a Boolean value. If you want to detect the checkbox is update(to be true or false) or not, You should $emit event.target.checked just like fstep said.
If v-on is the only listener that will be used it might be easier to use v-model as in the checkbox example from the Vue input docs.
However you can use listeners based on Binding-Native-Events-to-Components docs
<template>
<div class="field">
<label :for="name" class="label">
{{ label }}
</label>
<div class="control">
<input :id="name" :name="name" type="checkbox" class="control" checked="value" v-on="listeners" />
</div>
<p v-show="this.hasErrors" class="help has-text-danger">
<ul>
<li v-for="error in errors" :key="error">{{ error }}</li>
</ul>
</p>
</div>
</template>
<script>
export default {
name: 'check-edit',
props: {
value: {
type: Boolean,
default: false
},
label: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
errors: {
type: Array,
default: () => []
}
},
mounted() {},
computed: {
listeners() {
var vm = this;
// `Object.assign` merges objects together to form a new object
return Object.assign(
{},
// We add all the listeners from the parent
this.$listeners,
// Then we can add custom listeners or override the
// behavior of some listeners.
{
// This ensures that the component works with v-model
input: function(event) {
vm.$emit('input', event.target.checked);
}
}
);
},
hasErrors() {
return this.errors.length > 0;
}
}
};
</script>
Don't change props. Your component, having a v-model, should be emitting input events on change. The parent will handle the actual changing of the value.
Just completed a todolist tutorial.
When submitting the form the input field doesn't clear.
After trying both:
document.getElementById("todo-field").reset();
document.getElementById("#todo-field").value = "";
The input field properly clears but it also deletes the todo.
It seems to delete the input field before it has time to push the new todo in the todos.text array.
Would love some input guys! Thanks!!
<template>
<form id="todo-field" v-on:submit="submitForm">
<input type="text" v-model="text">
</form>
<ul>
<li v-for="todo in todos">
<input class="toggle" type="checkbox" v-model="todo.completed">
<span :class="{completed: todo.completed}" class="col-md-6">
<label #dblclick="deleteTodo(todo)">
{{todo.text}}
</label>
</span>
</li>
</ul>
<script>
export default {
name: 'todos',
data () {
return {
text: '',
todos: [
{
text:'My Todo One',
completed: false
},
{
text:'My Todo Two',
completed: false
},
{
text:'My Todo Three',
completed: false
}
]// End of array
}
},
methods: {
deleteTodo(todo){
this.todos.splice(this.todos.indexOf(todo),1);
},
submitForm(e){
this.todos.push(
{
text: this.text,
completed: false
}
);
//document.getElementById("todo-field").reset();
document.getElementById("#todo-field").value = "";
// To prevent the form from submitting
e.preventDefault();
}
}
}
</script>
These solutions are good but if you want to go for less work then you can use $refs
<form ref="anyName" #submit="submitForm">
</form>
<script>
methods: {
submitForm(){
// Your form submission
this.$refs.anyName.reset(); // This will clear that form
}
}
</script>
What you need is to set this.text to an empty string in your submitForm function:
submitForm(e){
this.todos.push(
{
text: this.text,
completed: false
}
);
this.text = "";
// To prevent the form from submitting
e.preventDefault();
}
Remember that binding works both ways: The (input) view can update the (string) model, or the model can update the view.
Assuming that you have a form that is huge or simply you do not want to reset each form field one by one, you can reset all the fields of the form by iterating through the fields one by one
var self = this;
Object.keys(this.data.form).forEach(function(key,index) {
self.data.form[key] = '';
});
The above will reset all fields of the given this.data.form object to empty string. Let's say there are one or two fields that you selectively want to set to a specific value in that case inside the above block you can easily put a condition based on field name
if(key === "country")
self.data.form[key] = 'Canada';
else
self.data.form[key] = '';
Or if you want to reset the field based on type and you have boolean and other field types in that case
if(typeof self.data.form[key] === "string")
self.data.form[key] = '';
else if (typeof self.data.form[key] === "boolean")
self.data.form[key] = false;
For more type info see here
A basic vuejs template and script sample would look as follow
<template>
<div>
<form #submit.prevent="onSubmit">
<input type="text" class="input" placeholder="User first name" v-model="data.form.firstName">
<input type="text" class="input" placeholder="User last name" v-model="data.form.lastName">
<input type="text" class="input" placeholder="User phone" v-model="data.form.phone">
<input type="submit" class="button is-info" value="Add">
<input type="button" class="button is-warning" #click="resetForm()" value="Reset Form">
</form>
</div>
</template>
See ow the #submit.prevent="onSubmit" is used in the form element. That would by default, prevent the form submission and call the onSubmit function.
Let's assume we have the following for the above
<script>
export default {
data() {
return {
data: {
form: {
firstName: '',
lastName: '',
phone: ''
}
}
}
},
methods: {
onSubmit: function() {
console.log('Make API request.')
this.resetForm(); //clear form automatically after successful request
},
resetForm() {
console.log('Reseting the form')
var self = this; //you need this because *this* will refer to Object.keys below`
//Iterate through each object field, key is name of the object field`
Object.keys(this.data.form).forEach(function(key,index) {
self.data.form[key] = '';
});
}
}
}
</script>
You can call the resetForm from anywhere and it will reset your form fields.
For reset all field in one form you can use event.target.reset()
const app = new Vue({
el: '#app',
data(){
return{
name : null,
lastname : null,
address : null
}
},
methods: {
submitForm : function(event){
event.preventDefault(),
//process...
event.target.reset()
}
}
});
form input[type=text]{border-radius:5px; padding:6px; border:1px solid #ddd}
form input[type=submit]{border-radius:5px; padding:8px; background:#060; color:#fff; cursor:pointer; border:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<div id="app">
<form id="todo-field" v-on:submit="submitForm">
<input type="text" v-model="name"><br><br>
<input type="text" v-model="lastname"><br><br>
<input type="text" v-model="address"><br><br>
<input type="submit" value="Send"><br>
</form>
</div>
Markup
<template lang="pug">
form
input.input(type='text' v-model='formData.firstName')
input.input(type='text' v-model='formData.lastName')
button(#click='resetForm') Reset Form
</template>
Script
<script>
const initFromData = { firstName: '', lastName: '' };
export default {
data() {
return {
formData: Object.assign({}, initFromData),
};
},
methods: {
resetForm() {
// if shallow copy
this.formData = Object.assign({}, initFromData);
// if deep copy
// this.formData = JSON.parse(JSON.stringify(this.initFromData));
},
},
};
</script>
Read the difference between a deep copy and a shallow copy HERE.
I use this
this.$refs['refFormName'].resetFields();
this work fine for me.
This solution is only for components
If we toggle(show/hide) components using booleans then data is also removed.
No need to clean the form fields.
I usually make components and initialize them using booleans.
e.g.
<template>
<button #click="show_create_form = true">Add New Record</button
<create-form v-if="show_create_form" />
</template>
<script>
...
data(){
return{
show_create_form:false //making it false by default
}
},
methods:{
submitForm(){
//...
this.axios.post('/submit-form-url',data,config)
.then((response) => {
this.show_create_form= false; //hide it again after success.
//if you now click on add new record button then it will show you empty form
}).catch((error) => {
//
})
}
}
...
</script>
When use clicks on edit button then this boolean becomes true and after successful submit I change it to false again.
I had a situation where i was working with a custom component and i needed to clear the form data.
But only if the page was in 'create' form state, and if the page was not being used to edit an existing item. So I made a method.
I called this method inside a watcher on custom component file, and not the vue page that uses the custom component. If that makes sense.
The entire form $ref was only available to me on the Base Custom Component.
<!-- Custom component HTML -->
<template>
<v-form ref="form" v-model="valid" #submit.prevent>
<slot v-bind="{ formItem, formState, valid }"></slot>
</v-form>
</template>
watch: {
value() {
// Some other code here
this.clearFormDataIfNotEdit(this)
// Some other code here too
}
}
... some other stuff ....
methods: {
clearFormDataIfNotEdit(objct) {
if (objct.formstate === 'create' && objct.formItem.id === undefined) {
objct.$refs.form.reset()
}
},
}
Basically i checked to see if the form data had an ID, if it did not, and the state was on create, then call the obj.$ref.form.reset() if i did this directly in the watcher, then it would be this.$ref.form.reset() obvs.
But you can only call the $ref from the page which it's referenced.
Which is what i wanted to call out with this answer.
This is how I do it in Vue 3.
html:
<input type="text" v-model="state.name">
js:
import {reactive} from "vue";
const state = reactive({
name: ""
})
axios.post('/contact', state)
.then(res => {
if (res.status == 200) {
state.name = ""
}
})
Response status 200 being a successful submission of the form input. state.name is reactive and will be set to "" if the submission is successful.
if your using vue.js v-form you can simply do like
this.form.reset()
Documentation
Vform - Documentation