Question

我想将两个函数绑定到一个HTML元素中。下面是Vue函数的代码

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元素

<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>
    //..

这个想法是我想绑定函数change和modify_price。所以这是细节

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.

那么我如何同时运行该代码并绑定两个函数呢？我从这个github issue那里确认了

Component v-model是为单值输入组件设计的，这些组件会处理本机输入元素的类似用例。

对于管理多个同步的复杂组件   一个值，显式的prop / event对是正确的解决方案。在这   特殊情况下，我认为保存的击键不值得添加   附加语法的复杂性。

有什么主意吗？谢谢。

Answer 1

经过一天的研究，我找到了在一个HTML DOM中具有2个v模型的解决方案。这是我的解决方法

首先，我们需要将v-model绑定到计算参数的vue.component

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

其次，将HTML DOM更改为以下

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

多个V模型Javascript Vue Js

1 个答案: