How insert JavaScript into Vue file

Question

I found a number to words script, and want to use this script in a .vue file, but can't find where to insert this script. Maybe someone can help where to insert this script? and how to change onkeyup which works on vuejs2

function convertNumberToWords(amount) {
    var words = new Array();
    words[0] = '';
    words[1] = 'One';
    words[2] = 'Two';
    words[3] = 'Three';
    words[4] = 'Four';
    words[5] = 'Five';
    words[6] = 'Six';
    words[7] = 'Seven';
    words[8] = 'Eight';
    words[9] = 'Nine';
    words[10] = 'Ten';
    words[11] = 'Eleven';
    words[12] = 'Twelve';
    words[13] = 'Thirteen';
    words[14] = 'Fourteen';
    words[15] = 'Fifteen';
    words[16] = 'Sixteen';
    words[17] = 'Seventeen';
    words[18] = 'Eighteen';
    words[19] = 'Nineteen';
    words[20] = 'Twenty';
    words[30] = 'Thirty';
    words[40] = 'Forty';
    words[50] = 'Fifty';
    words[60] = 'Sixty';
    words[70] = 'Seventy';
    words[80] = 'Eighty';
    words[90] = 'Ninety';
    amount = amount.toString();
    var atemp = amount.split(".");
    var number = atemp[0].split(",").join("");
    var n_length = number.length;
    var words_string = "";
    if (n_length <= 9) {
        var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
        var received_n_array = new Array();
        for (var i = 0; i < n_length; i++) {
            received_n_array[i] = number.substr(i, 1);
        }
        for (var i = 9 - n_length, j = 0; i < 9; i++, j++) {
            n_array[i] = received_n_array[j];
        }
        for (var i = 0, j = 1; i < 9; i++, j++) {
            if (i == 0 || i == 2 || i == 4 || i == 7) {
                if (n_array[i] == 1) {
                    n_array[j] = 10 + parseInt(n_array[j]);
                    n_array[i] = 0;
                }
            }
        }
        value = "";
        for (var i = 0; i < 9; i++) {
            if (i == 0 || i == 2 || i == 4 || i == 7) {
                value = n_array[i] * 10;
            } else {
                value = n_array[i];
            }
            if (value != 0) {
                words_string += words[value] + " ";
            }
            if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
                words_string += "Crores ";
            }
            if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
                words_string += "Hundred and ";
            }
            if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
                words_string += "Thousand ";
            }
            if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
                words_string += "Hundred and ";
            } else if (i == 6 && value != 0) {
                words_string += "Hundred ";
            }
        }
        words_string = words_string.split("  ").join(" ");
    }
    return words_string;
}

<input type="text" name="number" placeholder="Number OR Amount" onkeyup="word.innerHTML=convertNumberToWords(this.value)" />
<div id="word"></div>

score 2 · Accepted Answer · edited Jul 15 '22 at 21:54

You're really not taking advantage of Vue doing it that way. You don't need to use manual event handlers or direct DOM manipulation at all at all; instead let the framework take care of it for you. One way is to use a computed property based on the input value:

Computed Property:

<input type="text" name="number" placeholder="Number OR Amount" v-model="theNumber">
<div id="word" v-html="theWord"></div>

...

computed: {
   theWord() {
      // your "convertNumberToWords" function here, using `this.theNumber` as its input, and returning the word you want displayed in the DOM
      return "foo"; 
   }
}

Whenever the v-model theNumber changes, the computed theWord function will automatically run and update the DOM.

Below is a functioning example containing your complete "number to words" function:

Vue.component('theComponent', {
  template: `
    <span>
      <input v-model="theNumber">
      <div v-html="theWord"></div>
    </span>`,
  data() {
    return {
      theNumber: '1'
    }
  },
  computed: {
    theWord() { 
      var words = new Array();
      words[0] = '';
      words[1] = 'One';
      words[2] = 'Two';
      words[3] = 'Three';
      words[4] = 'Four';
      words[5] = 'Five';
      words[6] = 'Six';
      words[7] = 'Seven';
      words[8] = 'Eight';
      words[9] = 'Nine';
      words[10] = 'Ten';
      words[11] = 'Eleven';
      words[12] = 'Twelve';
      words[13] = 'Thirteen';
      words[14] = 'Fourteen';
      words[15] = 'Fifteen';
      words[16] = 'Sixteen';
      words[17] = 'Seventeen';
      words[18] = 'Eighteen';
      words[19] = 'Nineteen';
      words[20] = 'Twenty';
      words[30] = 'Thirty';
      words[40] = 'Forty';
      words[50] = 'Fifty';
      words[60] = 'Sixty';
      words[70] = 'Seventy';
      words[80] = 'Eighty';
      words[90] = 'Ninety';
      amount = this.theNumber.toString();
      var atemp = amount.split(".");
      var number = atemp[0].split(",").join("");
      var n_length = number.length;
      var words_string = "";
      if (n_length <= 9) {
        var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
        var received_n_array = new Array();
        for (var i = 0; i < n_length; i++) {
          received_n_array[i] = number.substr(i, 1);
        }
        for (var i = 9 - n_length, j = 0; i < 9; i++, j++) {
          n_array[i] = received_n_array[j];
        }
        for (var i = 0, j = 1; i < 9; i++, j++) {
          if (i == 0 || i == 2 || i == 4 || i == 7) {
            if (n_array[i] == 1) {
              n_array[j] = 10 + parseInt(n_array[j]);
              n_array[i] = 0;
            }
          }
        }
        value = "";
        for (var i = 0; i < 9; i++) {
          if (i == 0 || i == 2 || i == 4 || i == 7) {
            value = n_array[i] * 10;
          } else {
            value = n_array[i];
          }
          if (value != 0) {
            words_string += words[value] + " ";
          }
          if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
            words_string += "Crores ";
          }
          if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
            words_string += "Hundred and ";
          }
          if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
            words_string += "Thousand ";
          }
          if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
            words_string += "Hundred and ";
          } else if (i == 6 && value != 0) {
            words_string += "Hundred ";
          }
        }
        words_string = words_string.split("  ").join(" ");
      }
      return words_string;

    }
  }
});

new Vue({
  el: '#app'
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
  <the-component></the-component>
</div>

Filter:

Alternatively, if you're using this same function frequently throughout your app, it might be better to implement it as a filter instead. Define the filter in your main.js and it will be available in all components:

Vue.filter('numberToWord', function (value) {
  // your function here
})

<!-- these are equivalent: -->
<span>{{theNumber | numberToWord}}</span>
<span>{{filters.numberToWord(theNumber)}}</span>

Converting numbers to words:

Incidentally: this isn't directly relevant to your question but there are some issues with the number-to-words function itself you should be aware of; it fails for many input values above 99,999 -- 100001 comes out as "One Hundred And One" for example -- and uses the regionally-specific term "Crores" for ten million, which you may want to remove unless your site is for an audience that will be familiar with that term.

Here are several other implementations of the same idea, some of which may be preferable to the one used above.

Thanks, you very much now its more clear to me, but when i try to do with first example i get this error "[Vue warn]: Error in render: "ReferenceError: assignment to undeclared variable amount"" — Giedrius, Apr 27 '18 at 14:20
Looks like the function wasn't written for strict mode: it includes a few undeclared variables; you'd need to go through it and update those lines to satisfy the linter (`var amount = this.theNumber.toString` instead of just `amount = this.etc`) — Daniel Beck, Apr 27 '18 at 14:24

Kim Desrosiers · Answer 2 · 2018-04-27T13:37:52.560

0

Here are some ways to do it.

You can add this script to another Javascript file and import it into your script section in the .vue file.

<script>
import numberToWords from 'utils';
....   
</script>

Or you could create a method in your component with this function inside it.

In my opinion, the first version is better because you can reuse it in all your components.

edited Apr 27 '18 at 13:37

answered Apr 27 '18 at 13:05

Kim Desrosiers

744
7
13

score 0 · Answer 3 · edited Apr 27 '18 at 13:44

0

.vue files accept all valid JavaScript code, so you could either simply place this function in your Vue component in the methods object and use it normally, or if you would like to use this across many components you can also place it in a file and import it into your component(s).

How to import JS libraries

edited Apr 27 '18 at 13:44

Kim Desrosiers

744
7
13

answered Apr 27 '18 at 13:09

Derek Fulginiti

333
1
9

Thanks, and maybe can help with html how to change onkeyup and when what to write into div ? – Giedrius Apr 27 '18 at 13:15
You would bind the onkeyup event using v-bind or : as a shortcut :onkeyup="convertNumberToWords()" It is important to note that the event object will be passed automatically to the called function and can be used to retrieve the input value via `convertNumberToWords(event) { event.target.value }` You could also bind the input value to a piece of data and pass that to the function. – Derek Fulginiti Apr 27 '18 at 13:47

How insert JavaScript into Vue file

3 Answers3

Computed Property:

Filter:

Converting numbers to words: