vue3中v-model在el-input里的一个小坑 2024

先看一个例子

下面是一个组件之间联动的例子，代码如下：

<template>
    <div class="app-container">
        <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="选中值EL1">
                <el-input v-model="checkList" @input="onDefaultValueInput"></el-input>
            </el-form-item>

            <el-form-item label="选中值EL2">
                <el-input :value="setDefaultValue(checkList)" @input="onDefaultValueInput"></el-input>
            </el-form-item>

            <el-form-item label="选中值EL3">
                <el-input :model-value="setDefaultValue(checkList)" @update:model-value="onDefaultValueInput"></el-input>
            </el-form-item>

            <el-form-item label="选中值ORI">
                <div class="el-input el-input--default">
                    <div class="el-input__wrapper">
                        <input class="el-input__inner" :value="setDefaultValue(checkList)" @input="onDefaultValueInput"
                            placeholder="请输入默认值" />
                    </div>
                </div>
            </el-form-item>

            <el-checkbox-group v-model="checkList">
                <el-checkbox v-for="option in options" :label="option.label" :value="option.value" />
            </el-checkbox-group>
        </el-form>
    </div>
</template>

<script setup>

const options = ref([
    {
        label: '中国',
        value: '1'
    },
    {
        label: '美国',
        value: '2'
    },
    {
        label: '新加坡',
        value: '3'
    }
])

const checkList = ref([
    '1'
])

const data = reactive({
    form: {},
    rules: {
        code: [
            { required: true, message: "编码不能为空", trigger: "blur" }
        ], name: [
            { required: true, message: "名称不能为空", trigger: "blur" }
        ],
    }
});

const { form, rules } = toRefs(data);

function setDefaultValue(val) {
    if (Array.isArray(val)) {
        return val.join(' ')
    }

    return val
}

function isNumberStr(str) {
    return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
}

function onDefaultValueInput(e) {
    // console.log(e)
    // console.log(this.activeData)
    const str = typeof (e) === 'string' ? e : e.target.value
    let isStringOption = false;

    if (typeof options.value[0].value === 'string') {
        isStringOption = true
    }

    checkList.value = str.split(' ').map(val => (isNumberStr(val) ? (isStringOption ? '' + val : +val) : val))
}
</script>

这里对el-input有三种写法，其中 第二种写法 即 选中值EL2 这种写法交互是有问题的。同样的写法原生组件没问题，但 el-input 这类组件有问题。正确的写法是 第三种写法 即 选中值3

原因

参考 Vue3 里的 v-model 对原生组件和自定义组件的写法不一样。
https://vuejs.org/guide/components/v-model.html