vue , 赋值的问题

Question

业务场景是这样，现在我想知道如何在点击完成的时候，把值传到对应的input中去，总不能每个都写一个完成方法吧？求大神解答，

HTML代码，v-model绑定

公共的picker

<transition name="slide-fade">
<div class="picker-wrapper" v-show="showPicker">
<div class="operation">
<span class="cancel" @click="cancel">取消</span>
<span class="complete" @click="complete">完成</span>
</div>
<mt-picker :slots="slots" ref="pickerValue"></mt-picker>
</div>
</transition>

其实就是想知道点击完成的时候如何判断到是哪个input点击的，最后给他赋值，可能说的不太清楚，求解答

Answer 1

看到代码上的问题：
两个input使用了相同的v-model="changText"，这样是会互相干扰的。

如果两个点击事件极其相似，看看能不能采用如下方法：

input:

<div @click="getData($event, 'industry')">
    <input id="txtIndustry" v-model="industry" />
</div>
<div @click="getData($event, 'nature')">
    <input id="txtNature" v-model="nature" />
</div>

methods:

data() {
    return {
        ...
        index: ""
        ...
    }
},
methods:{
...
    getData (event, index) {
        ...
        this.index = index
        ...
    },
    complete () {
        this.showPicker = false;
        switch(this.index)
        {
        case "industry":
          this.industry = this.$refs.pickerValue.values[0];
          break;
        case "nature":
          this.nature= this.$refs.pickerValue.values[0];
          break;
        default:
          ...
        }
    }
...
}

一些思路，希望有帮助

Answer 2

因为你每个li都绑在了一个changeText上，所以changeText一改变所有Input都跟着变了。
给li绑定的点击事件把当前li的索引传进去，你的industry和nature这两个函数是一样的，为什么要分开写？