I see this topic, But this is Jquery, how can I change it to Vue.js ? Is v-on
supported in Vue.js? Where is my mistake?
<div id="vue">
<input v-model="amountModel" v-on:keyup="AddCammas()" value="{{price}}">
</div>
<script>
el: #vue,
methods:{
AddCammas : funtion(){
if(event.which >= 37 && event.which <= 40) return;
$(this).val(function(index, value) {
this.message = this.amountModel
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
}
}
</script>
You don't need jQuery at all for this. You watch
your variable, and in the watch function, compute the reformatted version, then set it back to your variable using nextTick
(so it's not mutating before the watch is complete).
new Vue({
el: '#vue',
data: {
price: 0
},
watch: {
price: function(newValue) {
const result = newValue.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
Vue.nextTick(() => this.price = result);
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<div id="vue">
<input type="text" v-model="price" />{{price}}
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With