vue проверить значение в текстовом поле

Question

я хочу проверить значение на входе, если есть какое-либо значение на входе, я хочу добавить класс sh -is-active в div, используя VUE, но я не не знаю как ... пожалуйста, помогите мне

<template>
   <div class="sh-wrap sh-wrap-input sh-is-active">
      <label class="sh-label">First and Last Name</label>
      <input type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
      <span for="email" class="error">Required</span>
   </div>
</template>

Answer 1

Вы можете использовать v-model для привязки значения к входу и динамического добавления классов :class="{ 'sh-is-active': name }". Прочтите официальные документы о том, как связывать классы и стили

new Vue({
  el: '#example',

  data() {
    return {
      name: null
    }
  }
})

.sh-wrap-input {
  padding: 1rem;
  border: 1px solid gray;
}

.sh-is-active {
  background: yellow;
}

.sh-label {
  display: block;
  margin-bottom: .125rem;
}

.error {
  display: block;
  color: red;
  font-size: 12px;
  margin-top: .125rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="example" class="sh-wrap sh-wrap-input" :class="{ 'sh-is-active': name }">
  <label class="sh-label">First and Last Name</label>
  <input v-model="name" type="text" class="sh-form-control sh-input" placeholder="First and Last Name" />
  <span v-if="!name" for="email" class="error">Required</span>
</div>

Answer 2

чтобы проверить, существует ли значение, вы можете добавить :value="inputValue" и посмотреть его, используя

watch: {inputValue: function(value){
"add your class here" 

}}