What is the best approach to transform a lengthy collection of 'watch' statements into a functioning solution using VueJS?

Question

What is the best approach to transform a lengthy collection of 'watch' statements into a functioning solution using VueJS?

I am new to vueJS and need some help with optimizing my code. I have a long list of watch functions that are all essentially the same, but I'm not sure how to convert them into a more efficient and functional approach.

These watch functions are all related to adding commas in input tags using v-model, and while they work well, the redundancy makes the code look cumbersome. Each function is identical except for its name.

new Vue({
  data: {
    tmp_price1: '',
    tmp_price2: '',
    tmp_price3: '',
    tmp_a_price: '',
    tmp_b_price: '',
  },

  watch: {
   tmp_price1: function(newValue) {
     if (newValue != '') {
       const result = newValue.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       Vue.nextTick(() => this.tmp_price1 = result);
     }
   },
   tmp_price2: function(newValue) {
     if (newValue != '') {
       const result = newValue.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
       Vue.nextTick(() => this.tmp_price2 = result);
     }
   },

  ....(repeat)

  },

I would appreciate any suggestions on how to streamline these repetitive watch functions in a more efficient manner.

javascript vue.js vuejs2 watch

Answer 1

Answer №1

One way to approach this is by creating a component specifically for handling the comma formatting feature. This component would include a computed property that generates the formatted value, which can then be used by the parent component for updating purposes.

new Vue({
  el: '#app',
  data: {
    tmp_price1: '',
    tmp_price2: '',
    tmp_price3: '',
    tmp_a_price: '',
    tmp_b_price: '',
  },
  components: {
    commafiedInput: {
      props: ['value'],
      template: '<input v-model="commaValue">',
      computed: {
        commaValue: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', this.addCommas(newValue));
          }
        }
      },
      methods: {
        addCommas(v) {
          return v.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div> {{tmp_price1}}
    <commafied-input v-model="tmp_price1"></commafied-input>
  </div>
  <commafied-input v-model="tmp_price2"></commafied-input>
  <commafied-input v-model="tmp_price3"></commafied-input>
  <commafied-input v-model="tmp_a_price"></commafied-input>
  <commafied-input v-model="tmp_b_price"></commafied-input>
</div>

Answer 2

One way to approach this is by creating a component specifically for handling the comma formatting feature. This component would include a computed property that generates the formatted value, which can then be used by the parent component for updating purposes.

new Vue({
  el: '#app',
  data: {
    tmp_price1: '',
    tmp_price2: '',
    tmp_price3: '',
    tmp_a_price: '',
    tmp_b_price: '',
  },
  components: {
    commafiedInput: {
      props: ['value'],
      template: '<input v-model="commaValue">',
      computed: {
        commaValue: {
          get() {
            return this.value;
          },
          set(newValue) {
            this.$emit('input', this.addCommas(newValue));
          }
        }
      },
      methods: {
        addCommas(v) {
          return v.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div> {{tmp_price1}}
    <commafied-input v-model="tmp_price1"></commafied-input>
  </div>
  <commafied-input v-model="tmp_price2"></commafied-input>
  <commafied-input v-model="tmp_price3"></commafied-input>
  <commafied-input v-model="tmp_a_price"></commafied-input>
  <commafied-input v-model="tmp_b_price"></commafied-input>
</div>

Answer 3

Answer №2

One way to display the formatted version of a value is by using a simple filter:

new Vue({
  el: '#app',
  data: {
    tmp_price1: '123123',
    tmp_price2: '',
    tmp_price3: ''
  },
  filters: {
    myFilter(v) {
      return v.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }   
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div><input v-model="tmp_price1">{{tmp_price1 | myFilter}}</div>
  <div><input v-model="tmp_price2">{{tmp_price2 | myFilter}}</div>
  <div><input v-model="tmp_price3">{{tmp_price3 | myFilter}}</div>
  
</div>

However, simply applying the filter to the v-model attribute is not sufficient for input fields. A sub-component approach, like the one suggested in Roy J's answer on Stack Overflow, may be the best solution for better reusability. Alternatively, for a quick-and-dirty fix, you can add a change handler as shown below:

new Vue({
  el: '#app',
  data: {
    tmp_price1: '123123',
    tmp_price2: '',
    tmp_price3: ''
  },
  methods: {
    myFormatter(fieldname) {
      /* replace the user's input with the formatted value.
      
          There's probably some clever way to read the v-model 
          name from the input field instead of passing it to the 
          method as a string, but I'm not going to mess around 
          with that for what is after all a quick-and-dirty technique */
      this[fieldname] = this[fieldname].replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  },
  mounted() {
    // if the initial values aren't always empty, you'll need to run the
    // formatter function on component load as well as on user input:
    ['tmp_price1', 'tmp_price2', 'tmp_price3'].forEach(f => {
      this.myFormatter(f);
    });
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div><input v-model="tmp_price1" @input="myFormatter('tmp_price1')">{{tmp_price1}}</div>
  <div><input v-model="tmp_price2" @input="myFormatter('tmp_price2')">{{tmp_price2}}</div>
  <div><input v-model="tmp_price3" @input="myFormatter('tmp_price3')">{{tmp_price3}}</div>
</div>

(Another approach, highlighted in this answer to a similar query, uses a Vue directive to bind the input events instead of adding @input handlers.)

It's important to note that in the "filter" version, the original user input remains in the v-model values while the filtered value is displayed. On the other hand, in the second example, the formatting directly applies to the v-modeled values themselves, ensuring that any subsequent usage includes the formatted version. Depending on the situation, either or both techniques can prove helpful. In fact, combining them – removing non-digits in the v-model and then adding commas via a display-only filter, for instance – can also enhance functionality.

Answer 4

One way to display the formatted version of a value is by using a simple filter:

new Vue({
  el: '#app',
  data: {
    tmp_price1: '123123',
    tmp_price2: '',
    tmp_price3: ''
  },
  filters: {
    myFilter(v) {
      return v.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }   
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div><input v-model="tmp_price1">{{tmp_price1 | myFilter}}</div>
  <div><input v-model="tmp_price2">{{tmp_price2 | myFilter}}</div>
  <div><input v-model="tmp_price3">{{tmp_price3 | myFilter}}</div>
  
</div>

However, simply applying the filter to the v-model attribute is not sufficient for input fields. A sub-component approach, like the one suggested in Roy J's answer on Stack Overflow, may be the best solution for better reusability. Alternatively, for a quick-and-dirty fix, you can add a change handler as shown below:

new Vue({
  el: '#app',
  data: {
    tmp_price1: '123123',
    tmp_price2: '',
    tmp_price3: ''
  },
  methods: {
    myFormatter(fieldname) {
      /* replace the user's input with the formatted value.
      
          There's probably some clever way to read the v-model 
          name from the input field instead of passing it to the 
          method as a string, but I'm not going to mess around 
          with that for what is after all a quick-and-dirty technique */
      this[fieldname] = this[fieldname].replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
  },
  mounted() {
    // if the initial values aren't always empty, you'll need to run the
    // formatter function on component load as well as on user input:
    ['tmp_price1', 'tmp_price2', 'tmp_price3'].forEach(f => {
      this.myFormatter(f);
    });
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <div><input v-model="tmp_price1" @input="myFormatter('tmp_price1')">{{tmp_price1}}</div>
  <div><input v-model="tmp_price2" @input="myFormatter('tmp_price2')">{{tmp_price2}}</div>
  <div><input v-model="tmp_price3" @input="myFormatter('tmp_price3')">{{tmp_price3}}</div>
</div>

(Another approach, highlighted in this answer to a similar query, uses a Vue directive to bind the input events instead of adding @input handlers.)

It's important to note that in the "filter" version, the original user input remains in the v-model values while the filtered value is displayed. On the other hand, in the second example, the formatting directly applies to the v-modeled values themselves, ensuring that any subsequent usage includes the formatted version. Depending on the situation, either or both techniques can prove helpful. In fact, combining them – removing non-digits in the v-model and then adding commas via a display-only filter, for instance – can also enhance functionality.

What is the best approach to transform a lengthy collection of 'watch' statements into a functioning solution using VueJS?

Answer №1

Answer №2

Similar questions

Utilizing AngularJS to display a table with Rowspan functionality and the ability to filter elements

Unable to display the string following a space in the value attribute of an hbs file

Add a npm module without type definitions

Transform a JQuery function using the each method into vanilla JavaScript

How can I update a dropdown menu depending on the selection made in another dropdown using Angular

Tips for deactivating all JavaScript events on a webpage that has been loaded within an iframe

Executing numerous HTTP requests in a single Node.js HTTP request

Tricks for preventing axios from caching in GET requests

Having trouble with $.post request to a different domain in a node.js/express app running on port 8081

Guide to setting up value observation in React Context for optimal functionality

TypeError: The file extension ".json" is not recognized

Is there a way to retrieve the data selected in my modal window when a button is clicked, depending on the v-for value?

Reactjs: Could someone provide a more detailed explanation of this statement?

Tool for obfuscating client-side files using node.js

Is it possible to implement localStorage for auto-filling multiple forms simultaneously on a single webpage

Leverage the key-value pairs in JSON to automatically suggest types within the function parameters

Using PHP and JavaScript to enhance functionality around a hyperlink

Tips on organizing and designing buttons within a canvas

How to implement form modal binding using Laravel and Vue.js

There was an issue retrieving the value from the $.ajax() error function, as it returned [