【发布时间】：2021-12-21 06:42:07
【问题描述】：
我有以下 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" 做一样，但我不确定如何检查该字段是否为空
【问题讨论】：
-
您可以通过
this.dataName访问所有方法中的组件数据。只是不要将它们作为参数传递并直接在您的方法中使用它们。 -
为什么我不能传进去？正如我所说，对于具有 15 个输入的表单，而不是答案中显示的一行代码，必须为每个输入编写 if else 语句来硬编码@987654325 似乎效率低下且难以维护@
标签： vue.js vue-component