Вы действительно не пользуетесь тем, что Vue делает так. Вам вообще не нужно использовать ручные обработчики событий или прямое манипулирование DOM; вместо этого позвольте структуре позаботиться об этом за вас. Одним из способов является использование вычисляемого свойства на основе входного значения:
Вычисляемая недвижимость:
<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";
}
}
При каждом изменении v-модели theNumber вычисленная функция theWord автоматически запускается и обновляет DOM.
Ниже приведен пример работы, содержащий полную функцию «число в слова»:
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>
Фильтр:
В качестве альтернативы, если вы часто используете эту функцию во всем приложении, лучше использовать ее как фильтр . Определите фильтр в вашем main.js, и он будет доступен во всех компонентах:
Vue.filter('numberToWord', function (value) {
// your function here
})
<!-- these are equivalent: -->
<span>{{theNumber | numberToWord}}</span>
<span>{{filters.numberToWord(theNumber)}}</span>
Преобразование чисел в слова:
Кстати: это не имеет непосредственного отношения к вашему вопросу, но есть некоторые проблемы с самой функцией числа в слова, о которых вы должны знать; он терпит неудачу для многих входных значений выше 99,999 - например, 100001 выходит как «Сто сто один» - и использует регионально-специфический термин «Crores» для десяти миллионов, который вы можете удалить, если ваш сайт не предназначен для аудитория, которая будет знакома с этим термином.
Вот несколько других реализаций той же идеи , некоторые из которых могут быть предпочтительнее той, что использовалась выше.