A handy Vue.js function

Question

A handy Vue.js function

I'm currently working on creating a utility method in Vue.js to validate decimal numbers from any input field, but I am facing difficulty in persisting the value internally within Vue.js.

In the past, when using jQuery, I used this approach:

$('body').on('blur', '.decimal', function() {
    var val = $(this).val();
    if ($.isNumeric(val)) {
        val = parseFloat(val).toFixed(2);
        $(this).val(val);
    } else {
        $(this).val('');
    }
});

Although in Vue, my implementation seems to be overwriting the value without storing it internally as intended.

function isNumeric(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

methods: {
    validateDecimal: function (e) {
        var val = e.target.value;

        if (isNumeric(val)) {
            e.target.value = parseFloat(val).toFixed(2);
        } else {
            e.target.value = '';
        }
    }
}

HTML

<input class="ui-input" :value="some.value" placeholder="0.00" @blur="validateDecimal">
<input class="ui-input" :value="some.othervalue" placeholder="0.00" @blur="validateDecimal">
<input class="ui-input" :value="another.dynamic.input" placeholder="0.00" @blur="validateDecimal">

javascript vue.js vuejs2

Answer 1

Answer №1

It appears that passing the data object reference to the handler method is possible in this way: (Note, it's important not to just pass the data property alone as it may not act as a reference.)

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    inputs:{
      'v1':{
        value:'1.256'
      },
      'v2':{
        value:'1.521'
      }
    },
    someInput:{value:'1.7125'}
  },
  methods:{
    validateDecimal: function (obj, prop, event) {
        console.log('validateDecimal', obj);
        var value = event.target.value;
        console.log(value);
        if (Number(parseFloat(value)) === value) {
            value = parseFloat(value).toFixed(2);
            this.$set(obj, prop, value);
        } else {
            this.$set(obj, prop, '');
            event.target.value = '';
        }
    },
    foo: function(){
      console.log(this.inputs.v1.value)
      console.log(this.inputs.v2.value)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item,key in this.inputs">
    <input class="ui-input" :value="item.value" placeholder="0.00" @blur="validateDecimal(item, 'value', $event)">
  </div>
  <div>
    <input class="ui-input" :value="this.someInput.value" placeholder="0.00" @blur="validateDecimal(someInput,'value', $event)">
  </div>
  <button @click="foo">Click</button>
</div>

Edited by the original poster: Added an additional parameter for the name of the property and utilized $set to ensure reactivity of dynamic properties. This enhancement aims to make the method more versatile for handling various dynamic input fields with any property name.

Answer 2

It appears that passing the data object reference to the handler method is possible in this way: (Note, it's important not to just pass the data property alone as it may not act as a reference.)

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    inputs:{
      'v1':{
        value:'1.256'
      },
      'v2':{
        value:'1.521'
      }
    },
    someInput:{value:'1.7125'}
  },
  methods:{
    validateDecimal: function (obj, prop, event) {
        console.log('validateDecimal', obj);
        var value = event.target.value;
        console.log(value);
        if (Number(parseFloat(value)) === value) {
            value = parseFloat(value).toFixed(2);
            this.$set(obj, prop, value);
        } else {
            this.$set(obj, prop, '');
            event.target.value = '';
        }
    },
    foo: function(){
      console.log(this.inputs.v1.value)
      console.log(this.inputs.v2.value)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item,key in this.inputs">
    <input class="ui-input" :value="item.value" placeholder="0.00" @blur="validateDecimal(item, 'value', $event)">
  </div>
  <div>
    <input class="ui-input" :value="this.someInput.value" placeholder="0.00" @blur="validateDecimal(someInput,'value', $event)">
  </div>
  <button @click="foo">Click</button>
</div>

Edited by the original poster: Added an additional parameter for the name of the property and utilized $set to ensure reactivity of dynamic properties. This enhancement aims to make the method more versatile for handling various dynamic input fields with any property name.

A handy Vue.js function

Answer №1

Similar questions

Middleware in Express that requires asynchronous initialization

Bottom-aligning text in Tailwind CSS

Example of Utilizing Google Places API

Guide to retriecing a state in Next.js 14

Table template incompatibility detected with Bootstrap

Barba.jS is causing a delay in loading scripts after the page transition

Display image URL data in a pop-up box when the button is clicked without dimming the background

Using GraphQL to verify the existence of a transaction within the blockchain

How come TypeScript remains silent when it comes to interface violations caused by Object.create?

save the received data to a new document

Deciphering the occurrence of jQuery-Mobile page firing events: the mystery behind dialog pages appearing upon closure

I'm facing issues with Webpack not being able to resolve and locate the node

Enhancing User Experience with Bootstrap V5 Form Validation and Sweetalert2: Displaying a Message of Success Upon Successful Submission

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Donut and Bar Graph by Highchart

Enhancing middleware chaining in Express

Is it feasible to determine the specific memory address of an Object in a program?

What is the best way to incorporate an exception for the printThis() element?

The challenge of Angular form data binding

Tips for updating property values when calling a TypeScript function