What I am trying to achieve is a component that deals conditionally with new input or old input(edit). I've tried this, inspired by this question:
<input type="text" placeholder="New Event" v-model="event.title ? event.title : title" required/>
or even
<input type="text" placeholder="New Event" v-model="event.title || title" required/>
but both don't work. I get errors in the console.
event.title comes from prop event;
title is a property in the data object with the value of ''.
In Vue 2 do I need to build 2 separate components? One for new input and another for editing?
You can try this one, it works for me :
<td>
<div v-if="event">
<input v-model="event.title">
</div>
<div v-else><input v-model="title"></div>
</td>
I think you can use computed for this purpose like below :
<input type="text" placeholder="New Event" v-model="nameOfMethod" required/>
and within computed methods create nameOfMethod with your logic like this :
computed:{
nameOfMethod(){
if (this.event.title === "")
return this.title;
else
return this.event.title;
},
}
Related
I there guy's im struggling with a form that i need to complete using Vue.JS. Basically i need that the value of the field 'price_vat' its updated with some calculations evry time that input called 'price_user' is updated. Usign jquery evrything is going as well. Butt data is not passed to POST method using Vue.
<div class="col-md-6" v-show="form.active">
<div class="form-group">
<label >{{__('Price')}}</label>
<input type="number" v-model="form.price_user" class="form-control">
</div>
</div>
<div class="col-md-6" v-show="form.active">
<div class="form-group">
<label >{{__('Price with VAT')}}</label>
<input type="number" v-model="form.price_vat" class="form-control">
</div>
</div>
if i understand you correctly,, you want form.price_vat to change, every time you change form.price_user by typing inside the input.
you can do this using watch. just add the below your methods in vue:
watch:{
'form.price_user':function():{
this.form.price_vat += 1
},
}
so in this code, you update the value of form.price_vat by 1 every time the form.price_user changes. you can do anything inside the function of watch.
the complete vue part will be :
data(){
return:{
form:{
price_vat :'',
price_user : '',
}
}
},
methods:{},
watch:{
'form.price_user':function():{
this.form.price_vat += 1
},
}
I would like to bind a class on the input field where this class is suppose to be applied. In my case I have input fields that I am dynamically creating and since I can't bind values with v-model for input fields that are dynamically created I can't bind the class with v-model data.
This are the fields that I am creating inside of v-for loop:
<template v-for="input in ninjaForm.fields">
<div class="control">
<input
class="input is-large"
:class="{ hasValue: input.value }"
:ref="input.label.toLowerCase()"
:type="input.type"
:name="input.label.toLowerCase()"
:required="input.required == 1">
<label>{{ input.label }}</label>
</div>
</template>
I would like to know how can I bind a class now with that input field, so that I can check if the input field has some kind of value, so for example something like this:
:class="{ 'has-value' : this.input.value != ''}"
Hoe can I do that with Vue?
I think that you're trying to do a class binding using the Object Syntax
In your example, to apply the CSS class hasValue if your input has any value that isn't falsy, you'll have something like this :
<input
class="input is-large"
:class="{ hasValue: input.value }"
:ref="input.label.toLowerCase()"
:type="input.type"
:name="input.label.toLowerCase()"
:required="input.required == 1">
<label>{{ input.label }}</label>
I'm trying to use the debounce binding behaviour on a list of checkboxes, but it doesn't seem to be working the way I expect (I'm not sure if you can even debounce a checkbox):
<label repeat.for="v of values">
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
clicking on any of the checkboxes results in the checkedVal array updating immediately, whereas it works as I expect for a normal input:
<input type="text" value.bind="textVal & debounce:1000"/>
Can I debounce a checkbox input?
Here's the full code, with a GistRun here.
app.html:
<template>
<h1>Checkbox bind debounce</h1>
<form>
<label for="text">text input with debounce:1000 </label>
<input type="text" value.bind="textVal & debounce:1000"/>
<div repeat.for="v of values">
<br/>
<label>
<input type="checkbox" value.bind="v" checked.bind="checkedVal & debounce:1000"> Checkbox value "${v}"
</label>
</div>
</form>
<br/>
<p>Text value: ${textVal}</p>
<p>Checked values:</p>
<p repeat.for="v of checkedVal">${v}</p>
</template>
app.js:
export class App {
values = [1, 2, 3];
checkedVal = [];
}
Thanks!
At this time, it's not supported. The debounce binding behavior controls the rate at which the checkedVal property is assigned. In a checked binding, the property isn't assigned, the array instance referenced by the property is mutated with push and splice which circumvents the debouncing in the binding expression.
I'm using Vue for the first time, with Vue Validator. Here is an example of my code:
<label for="first_name">First name:
<span v-if="$validation1.first_name.required" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
The only issue at the moment is that when I land on the page with my form, the whole thing is covered in errors. Is there a way I can suppress the errors and only show them on input blur / form submit?
Argh, the Google-able word isn't about blur, or on submit – its about timing and initial:
http://vuejs.github.io/vue-validator/en/timing.html
<input id="first_name" initial="off" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
you need to add .dirty or .touched to your validation
<label for="first_name">First name:
<span v-if="$validation1.first_name.required && $validation1.first_name.touched" class="invalid">Enter your first name.</span>
<input id="first_name" placeholder="e.g. Christopher" class="" v-validate:first_name="['required']" v-model="first_name" name="first_name" type="text">
</label>
I was dealing with a similar problem. I had to have an initialized variable for the input name: "" but I also wanted to have a required attribute in element.
So I add required when the event onblur occurs.
<input name="name" type="number" v-model="name" #blur="addRequired" />
const app = Vue.createApp({
data() {
return {
name: ""
}
},
methods:{
addRequired: function(event){
event.target.setAttribute("required", true);
}
}
});
I am using Polymer for a short time and now i want to get the value of a paper input. I don't know how can I do this.
This is not working:
this.form.password
I want to get the Value of this field:
<paper-input label="Password" type="password" id="password" name="password" size="25" value=""></paper-input>
I also want get the Input for submitting of the e-mail input:
<paper-input label="Login" id="email" name="email" size="25" value=""></paper-input>
For submitting I am using:
<paper-button raised value="Login" type="submit" onclick="formhash(this.form, this.form.password);">Login</paper-button>
With normal input fields is this working.
You can use document.querySelector('#password').value to get the value of paper-input with id password in the formhash() function call or inside the function definition.
You can also use polymer's Automatic node finding to get value of an element using its id. In which keep the form/input in custom-element and use this.$.password.value to get the value of an element with id password. Like this
<!-- create a custom component my-form -->
<dom-module id="my-form">
<template>
<form is="iron-form" id="form" method="post">
<paper-input name="name" label="name" id="name"></paper-input>
<paper-button raised on-click="submitForm">Submit</paper-button>
</form>
</template>
<script type="text/javascript">
Polymer({
is: "my-form",
submitForm: function() {
alert(this.$.name.value);
if(this.$.name.value != "") // whatever input check
this.$.form.submit();
}
})
</script>
</dom-module>
<my-form></my-form> <!-- use custom-component my-form -->
If you don't want to use <form> you can also simply store the paper-input values in instance variables and use them later wherever you want.
All you have to do is store the input inside a value like this:
<paper-input label="Password" type="password" id="password" name="password" size="25" value="{{valueNameToStore}}"></paper-input>
And later access it like this:
var myPassword = this.valueNameToStore;
Using <form is="iron-form"> allows you to use <paper-input> and other input elements in forms https://elements.polymer-project.org/elements/iron-form
<form is="iron-form" id="form" method="post" action="/form/handler">
<paper-input name="name" label="name"></paper-input>
<input name="address">
...
<paper-button raised onclick="submitForm()">Submit</paper-button>
</form>
function submitForm() {
document.getElementById('form').submit();
}
or, sometimes you can try this.$.password.value to get the value for password.