關於重寫 v-model 的一點感想

最近使用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 解決了一個常見到的小問題, 但願能給遇到相同問題的小夥伴一點幫助.