CODEWITHSUNDEEP
vue.jsvuejs2
user13103965
user13103965

Reputation:

vue check value in textfield

i want to check value in input if has any value in input i want to add class sh-is-active to a div using VUE but i don't know how... please help me

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

Upvotes: 0

Views: 716

Answers (2)

Naresh
Naresh

Reputation: 872

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>

Upvotes: 3

mai elrefaey
mai elrefaey

Reputation: 392

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

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

}}

Upvotes: -2

Related Questions