Vue方法中修改传入的data变量值的实现方案咨询

问题原因 #

布尔值属于JavaScript基础类型，函数传参时是值传递，你修改的只是形参的副本，和data里的原变量没有关联，所以不会触发响应式更新。

最优实现方案（适配多字段扩展） #

推荐把所有输入框的状态统一存在一个对象里，后续新增字段只需要加对象属性，完全不用修改处理逻辑，维护成本最低：

<template>
    <div class="form form--login">
        <div class="form__row" :class="{entered: fieldEntered.email}">
            <label class="form__label" for="login-form-email">Email address</label>
            <input 
                type="text" 
                class="form__control form__control--textbox" 
                name="email-address" 
                id="login-form-email" 
                @focus="fieldEntered.email = true" 
                @blur="handleBlur($event, 'email')"
            >
        </div>
        <div class="form__row" :class="{entered: fieldEntered.password}">
            <label class="form__label" for="login-form-password">Password</label>
            <input 
                type="password" 
                class="form__control form__control--textbox form__control--password" 
                name="password" 
                id="login-form-password" 
                @focus="fieldEntered.password = true" 
                @blur="handleBlur($event, 'password')"
            >
        </div>
    </div>
</template>

<script>
    export default {
        name: 'login-form',
        data() {
            return {
                // 统一存储所有输入框的状态
                fieldEntered: {
                    email: false,
                    password: false
                }
            }
        },
        methods: {
            handleBlur(e, fieldKey) {
                if (e.currentTarget.value.trim() === '') {
                    // 直接修改对象对应属性，会触发响应式更新
                    this.fieldEntered[fieldKey] = false
                }
            },
        }
    }
</script>

轻量改法（不改动现有data结构） #

如果你不想调整现有data的变量定义，也可以直接传入变量名的字符串，通过实例属性访问的方式修改：

<!-- 模板里传入变量名字符串 -->
<input 
    type="text"
    @blur="handleBlur($event, 'emailEntered')"
>

methods: {
    handleBlur(e, fieldName) {
        if (e.currentTarget.value.trim() === '') {
            this[fieldName] = false
        }
    }
}

极简内联写法（适合字段较少的场景） #

如果不想额外写公共方法，也可以直接在模板的blur事件里做判断：

<input 
    type="text"
    @blur="e => e.target.value.trim() === '' && (emailEntered = false)"
>

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