Adding two computed class properties on a :class="{{}} {{}}" in Vue

Question

I'm pretty new to the Vue world and was curious if I'm able to apply 2 computed properties to a :class. I've tried giving a space to each prop :class="{{prop1}} {{prop2}}" but on reload the content will all disappear because something seems to be wrong.

Does anybody know if this is possible or if its even a good to do things this way?

Backstory

Im creating an input that will have the :class="{{showWhenButtonClicked}}" and another to give it a green input or a red input classname when the email is not valid.

If there are any details that I'm missing or a better way let me know. Thanks!!

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

Answer 1

You'd use array syntax to apply a list of classes:

<input :class="[showEmailInput, displayEmailError]"/>