[Vuejs]-Vue check value in textfield

by

3👍

✅

You can use v-model bind a value to the input and to dynamically add the classes :class="{ 'sh-is-active': name }". Read the official docs on how to bind classes and styles

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>
👤Naresh

-2👍

to check if value exists you can add :value="inputValue"
and watch for it using 

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

}}
👤mai elrefaey

Leave a comment