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

                }

            }

        }

    })

并change在 vue 实例上具有如下方法

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)

    },

我想change从这个 html触发方法

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

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

Answer 1

这是因为您的组件没有触发keyup事件。更改v-on:keyup="change"为v-on:input="change"或者在您的组件中将此添加到 textarea ：&nbsp;@keyup="$emit('keyup')"