将Vue组件绑定到Vue实例

Question

我在这里有Vue组件

     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)
                }
            }
        }
    })

并且在vue实例上将方法change作为波纹管

var content_kalkulasi = new Vue({
el: '#kalkulasi-table',
data: {
    arr: [{id:'',name:'',file:'',satuan: 0,sub: 0}],
    total: 0,
    index_upload: 0
}, 
methods:{
    add(){
        arr = {}
        arr.id = ''
        arr.name = ''
        arr.file = ''
        arr.satuan = 0
        arr.sub = 0
        this.arr.push(arr)
    },
    change(){
        this.total = 0
        for(x in this.arr){
            this.total += this.arr[x].satuan * this.arr[x].sub 
        }

        console.log(this.total)
    },

而且我想从此html触发方法change

<number-input style="" v-model="data.sub" v-on:keyup="change"></number-input> 

但是v-on:keyup="change"不会触发。我如何从Vue组件调用方法v-on:keyup="change"？谢谢

Answer 1

这是因为您的组件没有触发keyup事件。

将v-on:keyup="change"更改为v-on:input="change"

或在您的组件中将其添加到textarea：@keyup="$emit('keyup')"