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>