我有以下 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"，但我不確定如何檢查該欄位是否為空
uj5u.com熱心網友回復：
為了更改變數，您需要使用參考它 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353950.html