Hello I have a problem with simple code for input, because after specific steps it returns wrong data. It should return minLimt (1) value when user puts NaN e.g. string.
To reproduce:
- push + to increment initial value. After put any string and click outside input field. It’s ok in input is 1.
- Now put one more time string and click outside input field. The value in input equals last inserted string but not 1. Could someone explain me why?
<can-component tag="ss-spinner">
<style type="less">
display: block;
p { font-weight: bold; }
</style>
<template>
<button ($click)="decrement()">-</button>
<input type='text' {($value)}="spinnerValue" >
<button ($click)="increment()">+</button>
</template>
<script type="view-model">
import Map from 'can/map/';
import 'can/map/define/';
export default Map.extend({
define: {
spinnerValue: {
type: "number",
value: 1,
set: function(newVal) {
if(!isNaN(newVal)){
if(parseInt(newVal) < this.minLimit) {
return this.minLimit;
}
return newVal;
} else {
return this.minLimit;
}
}
},
minLimit: {
type: "number",
value: 1
}
},
increment: function(){
this.attr('spinnerValue', this.attr('spinnerValue') + 1);
},
decrement: function(){
this.attr('spinnerValue', this.attr('spinnerValue') - 1);
}
});
</script>
</can-component>