As a newcomer to the Vue world, I have been experimenting with applying 2 computed properties to a :class attribute. Initially, I tried separating each property by a space like this: :class="{{prop1}} {{prop2}}", but upon reload, all content would disappear due to an error in my approach.
I am wondering if anyone can confirm whether this is achievable or advisable?
Context
My objective is to create an input field that will display based on
:class="{{showWhenButtonClicked}}"If there are any crucial details I may be overlooking or a more efficient method of achieving this, I would greatly appreciate any insights. Thank you!
computed: {
validateEmail() {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(this.emailTo).toLowerCase())
},
showEmailInput() {
return this.sendEmail ? 'hide-show-option' : 'hide-option-input'
},
displayEmailError() {
return this.validateEmail() ? "valid-input" : "not-valid-input"
}
},
<input :class="{{showEmailInput}} {{displayEmailError}}" placeholder="Enter Email..." v-model="emailTo" @blur="{{validateEmail}}" type="email">