Skip to content
Advertisement

How to hide and show and element as per input value in vueJs [closed]

How to show and hide input as per sibling input value in vue js.

Advertisement

Answer

You can use v-show in the input and pass the sibling v-model value in it to check if it contains value or not.

In below demo, we are showing the input if sibling input have alpha value. You can add condition as per your requirement.

new Vue({
  el: '#app',
  data: {
    input1: null,
    input2: null
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="input1" placeholder="Input 1"/>
  <input type="text" v-show="input1 === 'alpha'" v-model="input2"  placeholder="Input 2"/>
</div>
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement