I have the following input
<input
type="text"
:disabled="disabledMoney"
v-model="packageForm.crime.forgeryCrimeSelected"
v-mask="{alias: 'currency', digits:0, min:minMoney, max:maxMoney}"
autofocus
/>
to which I assign the property max:maxMoney of data ();
This input is shown based on a radio button, so when selecting the radio button the input appears and with its correct max value, but if I try to change the max value in a method, the change no longer applies
in the method I just do
change(){
this.maxMoney = 6000 // Assigning new max
}
But it does not apply and stays with its initial value
What you need to do is use a computed value. This will re calculate everytime there is a change in state with the values involved.
Here is some reading from the docs: https://v2.vuejs.org/v2/guide/computed.html
Hey based on your comment, I would do something like this:
<input
type="text"
:disabled="disabledMoney"
v-model="packageForm.crime.forgeryCrimeSelected"
v-mask="{alias: 'currency', digits:0, min:minMoney, max:maxMoneyComp }"
autofocus
/>
computed: { maxMoneyComp(){ return packageForm.crime.forgeryCrimeSelected == 10000 ? 10000:25000; } }
Related
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
I have an input field set up as
<input #input="e => machineCIDR = e.target.value" type="text" name="machine" class="form-control form-control-lg" :placeholder="machineCIDR">
The problem is, whenever someone fills out the form and then deletes it all, the placeholder is left with the last character that was filled out.
How can I setup :placeholder="machineCIDR" so that it shows the initial value, and then never gets updated again??
Assuming machineCIDR is set up already (as a prop or in data), you could create an object for storing all of your initial values:
data() {
return {
...
initial: {}
}
}
And set up the values in created:
created() {
this.initial['machineCIDR'] = this.machineCIDR;
}
Then bind to that instead in the placeholder:
:placeholder="initial['machineCIDR']"
in my template i build some v-rating component:
<div class="rating" v-for="rating in applicationViewCv.jobPostRatingFields" :key="rating.id">
<label :for="rating.id">
<b>{{rating.field}}</b>
</label>
<v-rating
#input="addRating(Number, rating.id)"
:value="rating.id"
background-color="indigo lighten-3"
color="indigo"
:dense="true"
:hover="true"
size="15"
:id="rating.id"
></v-rating>
</div>
I need to get the selected value in the event and pass it to addRating function.
now when i log the (Number) it passes to the function it returns:
ƒ Number() { [native code] }
and if i use Number() it always returns zero no matter what i have selected.
i tied to do this by documentation in the link below:
https://vuetifyjs.com/en/components/ratings
note: i cannot use v-model since the fields i want to get the rating of are dynamic hence i want to add an object for each field and push it into an array and send the array to the server
You can get the user selected rating value from input event, But instead of using Number, you should use
#input="addRating($event, rating.id)"
In methods
methods: {
addRating(value, id) {
console.log(value, id);
}
}
It prints the selected rating value along with the id
Working codepen here: https://codepen.io/chansv/pen/xxxPjNv?&editable=true&editors=101
Code:
<input type = "number" min="10" max="90" value="50" v-model="preview_width"/>
My website changes width of 2 components depending on "preview_width value". When I change value in input, website moves and doesn't let user enter correct value in friendly way. And my question is: How to edit "preview_value" AFTER user press "Enter", or after he stop targeting this input?
v-model has a .lazy modifier, which will sync the data after change events:
<input type = "number" min="10" max="90" value="50" v-model.lazy="preview_width"/>
You can read the documentation here: https://v2.vuejs.org/v2/guide/forms.html#lazy
You could use lazy to update the v-model only on change.
<input type = "number" min="10" max="90" value="50" v-model.lazy="preview_width"/>
or
<input type = "number" min="10" max="90" value="50" v-model="preview_width" lazy/>
Here is the doc: https://v1.vuejs.org/guide/forms.html#lazy
You can use lodash debounce method, which will delay triggering of the method to update width.
<input v-on:input="onChangePreviewWidth">
...
methods: {
onChangePreviewWidth: _.debounce(function (e) {
this.preview_width = e.target.value;
}, 500)
}
...
I am facing a problem with my page with VueJS. It's a page for different translations of the website. It has a dropdown on the top for the language selection that once switched will update the fields with the current language.
The problem starts when it loads, because my form is like this:
<form id="trForm">
...
<input type="text" name="header_title" class="form-control" v-model="translations.header.header_title" />
...
</form>
It's trying to access these attributes before the method returns any data, but somehow it will still show the data once it is complete, but it becomes troublesome when I try to switch the language, it won't because of this problem and also, if I do the following:
<form id="trForm">
...
<input type="text" name="header_title" v-if="translations.header" class="form-control" v-model="translations.header.header_title" />
...
</form>
on each field, those that aren't populated will display no field at all for a new input value. I tried something like translations.features || '', but no success.
I also tried to put on the parent block a condition that if the loading is false will display the form, but since the page is loaded first than the method is executed, it will always be false for the first microsecond.
methods: {
fetchTranslations(e) {
let vm = this;
vm.loaded = false;
$.get('/ajax/admin/translations', { 'locale': e }).done((data) => {
if (data.success) {
vm.translations = JSON.parse(data.translations.translation);
vm.loaded = true;
} else {
toastr.error('Something went wrong');
}
});
},
Please, what do I do? It'd be good to show the form after there is data.
Introduce a new variable, e.g. loaded that defaults to false
Use this variable as a v-if condition on the form
In the callback of your data fetch, set loaded to true.