How Insert JavaScript into Vue File

How to add local javascript to vue component?

@rx2347 That works! (But)

What's weird is that the local javascript is jquery / legacy js, so they don't export anything. I don't think the javascript has time to find the elements on the DOM referenced in the legacy code (ex. document.getElementById('asd'))

So that's on me to figure out

Thanks for the help!

How insert JavaScript into Vue file

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>

How Insert JavaScript into Vue File

How to add local javascript to vue component?

How insert JavaScript into Vue file

Computed Property:

Related Topics

Leave a reply