CODEWITHSUNDEEP
javascriptvue.js
Yohanes AI
Yohanes AI

Reputation: 3619

Bind Vue component to Vue instance

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?

Upvotes: 0

Views: 139

Answers (1)

Pierre Said
Pierre Said

Reputation: 3820

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')"

Upvotes: 1

Related Questions