vue.js - vue , 赋值的问题

问题描述

问 题

业务场景是这样，现在我想知道如何在点击完成的时候，把值传到对应的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点击的，最后给他赋值，可能说的不太清楚，求解答

解决方案

看到代码上的问题：
两个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:
          ...
        }
    }
...
}

一些思路，希望有帮助

这篇关于vue.js - vue , 赋值的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！