多V型Javascript Vue Js

Question

I want to bind two functions here into one HTML element. Bellow the code of Vue function

var table_content = new Vue({
    el: '#table_content',
    data: {
        arr: [],
        _arr_original: [],
        price: 0,
    },
    created(){
        // some stuff here
    },
    methods:{
        change(index,index1){
            arr = this.arr[index]
            arr.total = arr.data[index1].Koef * arr.data[index1].harga_satuan
            Vue.set(this.arr,index,arr)
        }
    },
    computed:{
        modify_price:{
            get(){
                return this.price.toLocaleString()
            },
            set(value){
                var v = parseInt(value.replace(/,/g,''))
                isNaN(v) ? "" : this.price = v;
            }
        },
    }
})

HTML element

<table class="tableizer-table table-hover" id="table_content">
    <thead>
       <td>
            <div class="handsontableInputHolder">
                <textarea tabindex="-1" name="uom" class="handsontableInput area-custom val2 text-center" style="" v-model="data.harga_satuan modify_price" v-on:keyup="change(0,index)"></textarea>
            </div>
            {{-- <input name="txtEmmail" class="val2"/> --}}
        </td>
        <td>
            <div class="handsontableInputHolder">
                <textarea tabindex="-1" name="total" class="handsontableInput area-custom multTotal text-center" disabled style="">@{{ data.Koef * data.harga_satuan }}</textarea>
            </div>
        </td>
    //..

The idea is I want to bind function change and modify_price . So here are the detail

Function `change` will handle any input from user and count a total on HTML DOM `total`

Function `modify_price` will `get` input from user (number) and auto number formating with comma that input. In other hands function set will convert text with comma and turns into number.

So how I can running that code simmulteanously and binding both of function? I have check from thisgithub issue that

Component v-model is designed for single value input components that attend to similar use cases for native input elements.

For a complex component that manages the synchronization of more than one values, explicit prop/event pairs is the proper solution. In this particular case I don't think the saved keystrokes are worth the added complexity of additional syntax.

Any idea? Thank you.

Answer 1

After a day doing some research, I found a solution to have 2 v-model in one HTML DOM. Here are my solution

1. First, we need vue.component with v-model binded to computed parameter

   Vue.component('number-input', { props: ["value"], template: ` <div> <input type="textarea" class="val2 bhnPrice alatPrice handsontableInput area-custom text-center text-bold" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"/> </div>`, 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) } } } });

2. Second, change HTML DOM as bellow

   <div class="handsontableInputHolder"> <number-input style="" v-model="data.harga_satuan" v-on:keyup="change(2,index)"></number-input> </div>