I am currently working with a Vue component that looks like this:
Vue.component('number-input', {
props: {},
template: `<textarea class="handsontableInput subtxt area-custom text-center text-bold" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"></textarea>`,
data: function() {
return {
isInputActive: false
}
},
computed: {
displayValue: {
get: function() {
if (this.isInputActive) {
return this.value.toString()
} else {
return this.value.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
}
},
set: function(modifiedValue) {
let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ""))
if (isNaN(newValue)) {
newValue = 0
}
this.$emit('input', newValue)
}
}
}
})
In addition, I have the following methods named change on my vue instance:
var content_kalkulasi = new Vue({
el: '#kalkulasi-table',
data: {
arr: [{id:'',name:'',file:'',satuan: 0,sub: 0}],
total: 0,
index_upload: 0
},
methods:{
add(){
var arr = {}
arr.id = ''
arr.name = ''
arr.file = ''
arr.satuan = 0
arr.sub = 0
this.arr.push(arr)
},
change(){
this.total = 0
for(var x in this.arr){
this.total += this.arr[x].satuan * this.arr[x].sub
}
console.log(this.total)
},
Now, I am trying to trigger the method change from the following HTML code:
<number-input style="" v-model="data.sub" v-on:keyup="change"></number-input>
However, the v-on:keyup="change" event won't trigger. Can anyone advise me on how to call the method v-on:keyup="change" from within the Vue component? Any assistance would be greatly appreciated.