传递给vue中的方法时更改数据变量

Question

我有以下 vue 组件，我在其中根据输入是否聚焦来更改父行的 class

<template>
    <div class="form form--login">
        <div class="form__row" :class="{entered: emailEntered}">
            <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="emailEntered = true" @blur="handleBlur($event, emailEntered)">
        </div>
        <div class="form__row" :class="{entered: passwordEntered}">
            <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="passwordEntered = true" @blur="handleBlur($event, passwordEntered)">
        </div>
    </div>
</template>

<script>
    export default {
        name: 'login-form',
        data() {
            return {
                emailEntered: false,
                passwordEntered: false,
            }
        },
        methods: {
            handleBlur(e, enteredBool) {
                if (e.currentTarget.value.trim() === '') {
                    // this doesn't do anything - I can do an if else statement to change this.passwordEntered or this.emailEntered based on the name of the current target, but how do I change the value by passing it into the method?
                    enteredBool = false;  
                }
            },
        }
    }
</script>

但它似乎没有更改传递到方法中的变量 - 如何将数据变量传递到方法中并更改它的值？还是我应该以不同的方式来做？我真的不想做一个 if else 语句，因为我可能有一个有更多输入的表单，我认为维护起来效率真的很低

我还认为我可以在 @bur 中做一些事情，就像您可以做的那样 @blur="passwordEntered = false"，但我不确定如何检查该字段是否为空

Answer 1

为了更改变量，您需要使用 this

引用它

 handleBlur(e, enteredBool) {
   if (e.currentTarget.value.trim() === '') {
     this[enteredBool] = false;   //Change added
   }
 },

你传递它的方式应该像

@blur="handleBlur($event, 'emailEntered')" //Added single quotes

和

@blur="handleBlur($event, 'passwordEntered')" //Added single quotes

传递给vue中的方法时更改数据变量

change data variable when passed into a method in vue

vue.js

vue-component