I have this very basic HTML:
<div id="app">
<input type="number" @change="start=$event.target.value">
<input type="number" @change="final=$event.target.value">
<button v-bind:disabled="isButtonActive">Proceed</button>
{{start}} -- {{final}} -- {{res}}
</div>
And small vue.js code:
new Vue({
el: '#app',
data: {
start: 0,
final: 0
},
puted: {
res() {
return this.start < this.final;
}
},
methods: {
isButtonActive() {
return this.start < this.final;
}
}
})
Now for the issue:
If I put 2 to first input and 12 to second I got
'2 -- 12' -- false, but why - 2 < 12?
If I put 12 to second input first and then 2 to the first I got
'2 -- 12 -- true'
If I change 2 to 45 I got
'45 -- 12 -- true', oh
And now matter 'true' or 'false' button never bees active. Please help. Here is the codepen link
I have this very basic HTML:
<div id="app">
<input type="number" @change="start=$event.target.value">
<input type="number" @change="final=$event.target.value">
<button v-bind:disabled="isButtonActive">Proceed</button>
{{start}} -- {{final}} -- {{res}}
</div>
And small vue.js code:
new Vue({
el: '#app',
data: {
start: 0,
final: 0
},
puted: {
res() {
return this.start < this.final;
}
},
methods: {
isButtonActive() {
return this.start < this.final;
}
}
})
Now for the issue:
If I put 2 to first input and 12 to second I got
'2 -- 12' -- false, but why - 2 < 12?
If I put 12 to second input first and then 2 to the first I got
'2 -- 12 -- true'
If I change 2 to 45 I got
'45 -- 12 -- true', oh
And now matter 'true' or 'false' button never bees active. Please help. Here is the codepen link
Share Improve this question asked May 18, 2018 at 18:06 ParadoxetionParadoxetion 7262 gold badges11 silver badges31 bronze badges 2-
You are making your code harder than it should be. Use
v-model="start"instead of@change="start=$event.target.value"– i-- Commented May 18, 2018 at 18:20 -
If you want to use the method, you have to actually call the method,
v-bind:disabled="isButtonActive()". codepen.io/Kradek/pen/GdPrVY?editors=1010 – Bert Commented May 18, 2018 at 18:24
2 Answers
Reset to default 7because the value of $event.target.value is one string, not number, you can convert string to number by parseInt.
check below demo.
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
start: 0,
final: 0
},
puted: {
res() {
console.log(typeof this.start, typeof this.final, this.start < this.final)
console.log('[Use ParseInt]', parseInt(this.start) < parseInt(this.final))
return this.start < this.final;
}
},
methods: {
isButtonActive() {
return this.start < this.final;
}
}
})<script src="https://unpkg./[email protected]/dist/vue.js"></script>
<div id="app">
<input type="number" @change="start=$event.target.value">
<input type="number" @change="final=$event.target.value">
<button v-bind:disabled="isButtonActive">Proceed</button>
{{start}} -- {{final}} -- {{res}}
</div>You can use the modifier= v-model.number then you should v-bind:disabled with the result(isButtonActive()) of the function instead of the function itself(isButtonActive), or use v-bind:disabled="res" will be better. (the difference between puted properties and methods is that puted properties are cached based on their dependencies), you can hit click me button to see the differences.
like below demo:
Vue.config.productionTip = false
new Vue({
el: '#app',
data: {
start: 0,
final: 0,
testText: 'You will see isButtonActive is invoked, but puted properties will not'
},
puted: {
res() {
console.log('puted=res', typeof this.start, typeof this.final)
return this.start < this.final;
}
},
methods: {
isButtonActive() {
console.log('isButtonActive', typeof this.start, typeof this.final)
return this.start < this.final;
},
test: function () {
this.testText += '!'
}
}
})<script src="https://unpkg./[email protected]/dist/vue.js"></script>
<div id="app">
<input type="number" v-model.number="start">
<input type="number" v-model.number="final">
<button v-bind:disabled="isButtonActive()">Proceed</button>
<button v-bind:disabled="res">Proceed</button>
{{start}} -- {{final}} -- {{res}}
<hr>
<button @click="test()">Click me!!!</button>
<p>{{testText}}</p>
</div>There is no need to convert string to number. You can simply get the value as a number without transforming it :
$event.target.valueAsNumber
More detail: https://stackoverflow./a/68177209/12247829