vue如何动态绑定input的v-model

Question

如图所示
有三个字段要从弹出的输入框取值
点击字段会弹出上面的弹窗，输入input会响应变化，比如
点击身高，弹出输入框，输入值后身高后面会跟着一个同样的值
点击体重，弹出输入框，输入值后体重后面会跟着一个同样的值
。。。
那么问题来了，如何动态绑定input的v-model呢

Answer 1

demo如下
https://codepen.io/jackpan/pe...

Answer 2

加一个当前选择的状态，

data(){
     return {
         inputData:"",
         weight:"",
         height:"",
        current:0
    }
}

根据所点击的项目设置current
身高 this.current=1
体重 this.current=2
.
.
.
使用watch监听input

watch:{
    inputData(){
        if(this.status==1){
            this.height = this.inputData
        }
        if(this.status==2){
            this.weight = this.inputData
        }
    }
}

Answer 3

<input v-model="weight" type="text" />
<div>体重{{weight}}</div>

<script>
export default {
    data() {
        return {
            weight: ''
        }
    }
}

Answer 4

你只需要传入一个props值，告诉输入框组件，现在要输入的是什么就好了。比如你传入props:{key: height}，然后你监听输入事件，$emit('handleInput', {key: key, val: this.inputValue})出去就好，这样你在接收事件时$on('handleInput', data)，就可以知道现在应该赋值给什么了。
补充说明，这要求你的输入框弹窗组件是动态创建的，相对而言比较复杂。在动态创建该组件的时候可以传递props。

Answer 5

1L正解啊，很简单；

2L那个，不是很懂为什么这么说，props一般用于父对子，观察者一般用于兄弟