关于重写 v-model 的一点感想

2024年4月6日 181次阅读 来源: hack_qtxz

最近使用element-ui开发时总有一个问题困扰着我。
当时要写一个远程搜索选择框组件, 这个组件关联了一个后端的接口, 将后端返回的值映射到,绑定的对象上,
代码类似

<template>
    <el-select remote :remote-method="getList" v-model="foo.name"  key-value="name">
        <el-option v-for="item in list" :value="item" :label="item.name"/>
    </el-select>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                foo: {
                    name: '',
                    gender: '',
                    email: '',
                    ...
                }
            }
        },
        methods: {
            async getList(searchWord) {
                const list = await get(searchWord)
                // 返回的 list 的每一项的结构类似foo, 但有区别, 包含一些必要的信息.
                this.list = list
            }
        }
    }
<script>

注意: 我将 option的value值绑定成了一个对象, 而 foo.name 本来是字符串, 这样的后果就是, 每次用户点击选择后 foo.name就会变为对象, 对后续的保存造成了不方便,也破坏了原来的数据结构, 但如果不这么做,又无法拿到用户选择项对应的所有的数据.这样就造成了一个两难的境地.
好在vue在文档中指出 v-model 实际就是vue封装的语法糖.看这里

<input v-model="bar">

相当于

<input :value="bar" @input="bar=arguments[0]">

所以我对程序做了如下的修改:

<template>
    <el-select remote :remote-method="getList" :value="foo.name" @input="handleSelect(arguments[0])">
        <el-option v-for="item in list" :value="item.name" :key="item.name" :label="item.name"/>
    </el-select>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                foo: {
                    name: '',
                    gender: '',
                    email: '',
                    ...
                },
                bar: null
            }
        },
        methods: {
            async getList(searchWord) {
                const list = await get(searchWord)
                this.list = list
            },
            handleSelect(val) {
                this.foo.name = val.name
                // 在input事件回调中将用户选中的对象赋值给一个准备好的变量
                // 这样就既可以拿到想要的对象又不会破坏 foo 对象原有的结构
                this.bar = val
            }
        }
    }
<script>

通过自定义 v-model 解决了一个常见到的小问题, 希望能给遇到相同问题的小伙伴一点帮助.

    原文作者：hack_qtxz
    原文地址: https://segmentfault.com/a/1190000012136822
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞