I'm loading a Vue component which should render a basic form. I'm trying to set the input to have a default value, but for some reason nothing shows. Here is what i tried:
<template>
...
<input type="text" value="0.02" class="form-control" v-model="amount">
...
</template>
Why does nothing show into the input field? Is it because Vue doesn't support it or i need to use something else? Thanks in advance
The reason why you don't have a default value, is that this value is overwritten by the
v-model = "amount"
In order to set a default value, it would be better to set the value of amount in the returned vue data object.
You will have something like :
data: () => {
return {
amount: 0.02 // Your default value
}
}
…
The default value is set in data as follows:
new Vue({
el:"#app",
data() { return { amount: "0.02" } }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" class="form-control" v-model="amount">
</div>
Related
I'm using Vue, v-calendar library and moment library.
I want that when a page is rendered, a input tag should get a value from getAPI(), but it doesn't.
I guess it's because start and end in the range data is ''.
so I tried to assign data into the input value directly and it worked.
but I want to know why I should assign data in to input value directly.
Is there a way that doesn't use ref and using v-calendar properties?
Thanks in advance!
This is my template code below,
<form class="form" #submit.prevent>
<Vc-date-picker
v-model="range"
:masks="masks"
is-range
:min-date="today"
>
<template v-slot="{ inputValue, inputEvents, isDragging }">
<div class="rangeInput">
<div class="eachInputWrapper">
<input
id="eachInput"
ref="startInput"
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
:value="inputValue.start"
v-on="inputEvents.start"
/>
</div>
</div>
</template>
</Vc-date-picker>
</form>
This is my script code
data(){
return{
range: {
start: '',
end: '',
},
}
},
methods:{
dateFormat(data){
return moment(data).format("YYYY-MM-DD");
},
getAPI(){
this.$thisIsAPI(Id,Data).then((data)=>{
this.range.start = this.dateFormat(data.fromDate);
this.range.end = this.dateFormat(data.expireDate);
});
},
},
created(){
this.getAPI();
}
This is what I tried, and the input tag gets the value when the page is renderd.
getAPI(){
this.$thisIsAPI(Id,Data).then((data)=>{
this.range.start = this.dateFormat(data.fromDate);
this.range.end = this.dateFormat(data.expireDate);
});
this.$refs.startInput.value = this.dateFormat(this.botInfo.fromDt);
this.$refs.endInput.value = this.dateFormat(this.botInfo.expireDt);
},
I have tried all that I have read in other questions and they did not answer me the problem.
I have a checkbox like this in a list
<input type="checkbox" v-model="selected" :value="post.rut">
I have the model defined like this:
data: function() {
return {
selected: []
}
}
The problem is that If I add checked as default.. it does not change at all I mean it keeps the checkbox not checked
<input type="checkbox" v-model="selected" :value="post.rut" checked>
If I remove the v-model, it works BUT I can not send the value to the controller because I need the v-model to bind so I wonder how can I set as default checked in that checkbox input like that?
Thanks
you have the input value as post.rut you can put it in selected array in data like :
data: function() {
return {
selected: [this.post.rut]
}
}
If you already know which field you want to selected based on the post you can do like so:
data: function() {
return {
selected: [this.post.rut]
Here is a working example of what you asked for.
Note: You need not use v-model and :value at the same time since v-model itself is a two way binder.
var app = new Vue({
el: '#app',
data() {
return {
selected: true
};
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="checkbox" v-model="selected"/>
</div>
I'm trying to display a 2000.00 in an input field in vuejs but it strips the .00.
<div id="app">
<input
class="form-control"
type="number"
v-model="solicitorsFees"/>
</div>
new Vue({
el: "#app",
data: {
solicitorsFees: 2000.00,
},
})
How do I get the input field to display 2000.00?
jsfiddle
I can do this with a calculated property. But I need to apply this to multiple input fields.
solicitorsFeesDecimal: function(){
return(this.solicitorsFees.toFixed(2))
},
<input class="form-control" type="number" v-model="solicitorsFeesDecimal"/>
Solution:
<input class="form-control" type="number" :value="(this.solicitorsFees).toFixed(2)"/>
The appropriate solution is to use a computed property with a custom getter and setter, as well as using the v-model.number modifier:
Template
<div id="app">
<input
class="form-control"
type="number"
v-model.number="solicitorsFeesDisplay"/>
</div>
Script
new Vue({
el: "#app",
computed: {
solicitorsFeesDisplay: {
get: function() {
return this.solicitorsFees.toFixed(2)
},
set: function(newValue) {
this.solicitorsFees = newValue
}
}
},
data() {
return {
solicitorsFees: 2000.00
}
},
})
See a working example on CodeSandbox.
you should you step in input field:
<input type="number" v-model="solicitorsFees" step="0.01">
This solves the problem:
<input class="form-control" type="number" :value="(this.solicitorsFees).toFixed(2)"/>
You can simply use parseFloat and toFixed together to define the number of decimal places you want.
v-model= parseFloat(solicitorsFees).toFixed(2)
Also, another suggestion is to make the data object as a function, as in your fiddle you are using an object.
data () {
return {
solicitorsFees: 2000.00
}
}
I am trying to validate some input data (e.g. number) on an input-tag connected to some data via v-model.
The problem is, if I have invalid data (e.g. "1e"), the data will be "". Same goes obviously for empty input.
How can I differentiates empty input or invalid input?
var app = new Vue({
el: "#app",
data: {
budget: "",
},
methods: {
updateBudget() {
// do some input validation here. E.g.
if (this.budget === "") {
console.log("This is triggered on both:");
console.log("(1) empty input -> budget = ''");
console.log("(2) invalid input, e.g. -> budget = '1e'");
console.log("Problem: I can't split this in the above cases!");
};
},
},
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<div id="app">
<input v-model="budget" type="number" placeholder="Budget" min="0" step="0.01" #input="updateBudget" />
</div>
I'd appreciate a hint. Thanks
1e is not a number (also +, -). The output is empty as it's not a valid number, try to insert 1e0 or -1, you'll be able to catch the value. There are some related issues:
It is exactly how the spec says.
How to prevent extra characters
To catch the exact number without worry about 'e' use the internal Vue implementation. It takes care of such situations. (v-model.number)
<input
v-model.number="budget"
type="number"
placeholder="Budget"
min="0"
step="0.01"
#input="updateBudget"
/>
By the way, if you want to check 'e' explicitly, I think, it's better to use 'type=text'.
I did a custom solution based on some regex. Something like:
<template>
<div id="app">
<input v-model="budget" type="text" #input="validateAndUpdateInput" />
</div>
</template>
<script>
[...]
methods: {
validateAndUpdateInput: function() {
if (!/^-?([0]?|[1-9]{1}\d{0,15})([.]{1}\d{0,2})?$/.test(this.budget)) {
this.budget = this.previousInput;
//alert("not valid");
} else {
this.previousInput = this.budget;
this.$emit("update-input", this.budget);
}
},
[...]
</script>
I am trying to create a Vue.js component existing of some input fields. This means that the component template must accept name for the inputs.
Let's say I have the template:
<template>
<input type="text" name="VARIABLE">
</template>
and I call that component with
<component-input></component-input>
How do my component-input define the value of VARIABLE?
You can do like this
Vue.component('input-component', {
template: '<input type="text" :name="inputName">',
props: {
inputName: String
}
})
<input-component input-name="someName"></input-component>
The point to your question is to use props. Hope to help you.
I got it:
<template>
<input type="text" name="{{name}}">
</template>
-
<component-input name="demo"></component-input>
-
var component = Vue.extend({
props: {
name: {
type: String
}
}
});