change data variable when passed into a method in vue

Question

I have the following vue component where I am changing the class of the parent row based on whether or not an input is focused

<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>

but it doesn't seem to change the variable that is passed into the method - how do I pass a data variable into the method and change it's value? Or should I be doing it in a different way? I don't really want to be doing an if else statement as I may have a form that has got a lot more inputs on and I think that would be really inefficient to maintain

I also thought that I could do something in the @bur as you can do @blur="passwordEntered = false", but I wasn't sure how to check if the field was empty or not

You have access to your component data in all your methods with this.dataName. Just don't pass them as an argument and use them directly in your methods. — Lucas David Ferrero
– Lucas David Ferrero, Commented Nov 8, 2021 at 12:27
Why can't I pass them in? as I say, instead of the one line of code as shown in the answer, for a form with 15 inputs, it would seem rather inefficient and hard to maintain to have to write an if else statement for each input just to hardcode the this. — Pete
– Pete, Commented Nov 8, 2021 at 12:32

Amaarockz · Accepted Answer · 2021-11-08 12:13:31Z

3

In order to change the variable, you need to refer it using this

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

and the way you pass it should be like

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

and

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

answered Nov 8, 2021 at 12:13

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete Over a year ago

Ah brilliant, nice and simple. Thanks. Will accept when it lets me

Collectives™ on Stack Overflow

change data variable when passed into a method in vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related