时间戳

首页 > 解决方案 > 传递给vue中的方法时更改数据变量

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

问题描述

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

<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"，但我不知道如何检查该字段是否为空

标签： vue.jsvue-component

解决方案

为了更改变量，您需要使用它来引用它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

推荐阅读