v-model绑定和value传参

三金三金
428 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情 大家知道，v-model是双向绑定指令，一般都是用在表单中，绑定值的，很多时候，v-model绑定的就是value，那今天就来说说不一样的...

问题详情和分析

就比如说一个下拉选择框，那它肯定是要绑定v-model的吧，那么绑什么呢？这个当然不能由我们决定，而是由后端的字段决定，也就是后续要传的参数决定。比如这样的代码：

<a-select 
    placeholder="请选择产品信息"
    v-model=“form.i_prod_code”
    @search=“pro_search”
    @focus=“pro_open”
    @popupScroll=“pro_selectScroll”
    @select=“pro_select”
 >
     <a-select-option
         v-for="item in pro_pordList"
         :key="item.prod_id"
     >
         {{ `${item.prod_name}${item.prod_code === '-' ? '' : '-' + item.prod_code}` }}
     </a-select-option>
</a-select>

很明显，这个下拉框的v-model绑定的是表单数据对象form的i_prod_code，也就是下拉框选择的value值会赋给form.i_prod_code，而下拉框的value值绑定的是什么呢？代码中没写，是因为当key和value绑定的是同一个值的时候，可以省略不写value，也就是说其实这个下拉框绑定的value是数组数据pro_pordList每一项的prod_id，而{{}}表达式中的prod_name和prod_code共同展示的值是页面上呈现给用户看的。
现在问题来了，首先，v-model想绑定的值，看这个字段名字就知道肯定是每一项的prod_code， 但是按照目前这个代码的逻辑，最终绑定的肯定会是每一项的prod_id，因为value绑定的值是prod_id，那么由此可能会有两个选择。一是将key值绑定prod_code，这样value就也会绑定到prod_code，但是要知道key绑定prod_id是因为prod_id都是唯一值，而v-for指令的key值绑定唯一值可以说是最优实践，这个是毋庸置疑的；二是key值仍然绑定prod_id不变，设置：value=“item.prod_code”，将value绑定prod_code，这样行不行呢？可以试一下

dac3c36477c04e665720ada52175130.jpg

image.png 改为prod_code的结果就是，当你想选择某个选项时，会发现一下子选中了两个，为什么会这样呢？因为他们的value值是相同的，选中一个就会选中所有这个value值，并且控制台还会报错，错误意思是重复的值'-'可能会造成更新错误，因为prod_code很多都为'-'。

最优解

上面分析了这么多，但是问题总归会有答案的，那么这个问题的最优解是什么呢？请看代码：

image.png

data() {
    ...
    i_prod_code: ''
}
methods() {
    ...
    pro_select(val) {
        this.i_prod_code = this.pro_pordList.find(i => { return i.prod_id === val }).prod_code
    }
}

这个select方法是组件库中绑定好的方法，它会将选中的value值传进去，那么此时方法中的val参数就是那一项的prod_id了，这个时候就需要用find方法找出该项并拿到它的prod_code了。data中定义的i_prod_code就是拿来接收这个prod_code值的。接收到值之后，就需要将这个值用于调用接口时的传参了

<a-button type="primary" @click="search(i_prod_code)">查询</a-button>

search(i_prod_code) {
    this.getList(i_prod_code)
}
// 调用接口查询列表
getList(i_prod_code) {
    let params = { ...this.form }
    if (this.form.hasOwnProperty('i_prod_code')) params.i_prod_code = i_prod_code
    // 传参调用接口
    interfaceVAT(params).then(res => {
        ...
    })
}

查询的时候调用接口才需要传参，在传入参数之前，将prod_id转换成对应的prod_code就可以了，需要注意的是，不可以直接赋值，比如this.form.i_prod_code = i_prod_code或者this.form.i_prod_code = this.pro_pordList.find(i => { return i.prod_id === val }).prod_code，这样直接赋值的话，当点击查询触发search方法时，会导致页面上的下拉框中的值也随之变化为该项的prod_code，要知道v-model可是双向绑定，同理，我们调用接口前，也是用扩展运算符浅拷贝参数对象，自定义一个params变量来接收，最后将params作为参数传进去，就是怕会影响到页面显示。

end

以上就是我对于这个问题从头到尾的思路分析和最终解决方案，希望能对大家有所帮助，不胜感激！

avatar
文章
阅读
粉丝