Vue2中如何通过单个通用方法清除v-model绑定的表单字段值

方案实现 #

你不需要开发自定义组件，仅通过单个clearField()函数即可实现复用，核心利用JavaScript对象的方括号动态属性访问特性，直接传入字段名作为参数即可：

改后模板代码

<template>
    <form>
        <div>
            <datetime id="someDate" v-model="fields.some_date"></datetime>
            <button @click.prevent="clearField('some_date')">X</button>
        </div>
        <div>
            <datetime id="anotherDate" v-model="fields.another_date"></datetime>
            <button @click.prevent="clearField('another_date')">X</button>
        </div>
    </form>
</template>

改后逻辑代码

<script>
export default {
    data() {
        return {
            fields: {
                some_date: null,
                another_date: null
            },
        };
    },
    methods: {
        clearField(fieldKey) {
            this.fields[fieldKey] = null;
        },
    },
}
</script>

说明 #

• 调用clearField时传入fields对象中对应字段的键名字符串，即可通过方括号语法动态定位到要清空的属性
• 如果后续新增其他日期选择器，只需要在fields中新增对应属性，调用clearField时传入对应键名即可，无需额外新增清空方法

内容的提问来源于stack exchange，提问作者Sergi