Bind Vue component to Vue instance

Question

I have Vue component here

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

and have methods change on Vue instance as below

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

And I want to trigger method change from this html

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

butv-on:keyup="change" won't trigger. How I can call method v-on:keyup="change" from Vue component?

Pierre Said · Accepted Answer · 2019-10-31 17:44:01Z

1

It is because your component isn't firing the keyup event.

Change v-on:keyup="change" to v-on:input="change"

Or in your component add this to the textarea : @keyup="$emit('keyup')"

answered Oct 31, 2019 at 17:44

Pierre Said

3,8801 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yohanes AI Over a year ago

first of all, keyup triggered after key release and input event triggered every key change. I need keyup instead of input. Secondly, I have 2 page using same code, first one using keyup and it works well. why on the code above doesn't works?

Pierre Said Over a year ago

Try to add @keyup="$emit('keyup')" to your textarea

Collectives™ on Stack Overflow

Bind Vue component to Vue instance

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related