How to display input input fields on condition in VueJs

Question

Below is my html code with Vue instance. I need to display the input fields on condition using a value that i will get from database. I have chosen to define the value manually to try it out

    <div id="codeTest">
        <input id="input1" type="text" />
        <input id="input2" type="text" />

        {{$data}}
    </div>
    <script type="text/javascript">
     var inputVM= new Vue({
         el:"#codeTest",
         data:function(){
             return{
                 value:1
             }
         },
         created:function(){
             this.showInput();
         },
         methods:{
             showInput:function(value){
                 if(value==1){
                     document.getElementById("input1").style.display = '';
                     document.getElementById("input2").style.display = 'none';
                 }
                 else if(value==2){
                     document.getElementById("input1").style.display = '';
                     document.getElementById("input2").style.display = '';
                 }
             }
         }
     })

   `I am getting two input field instead of one. How do i go about it? Thanks in advance` 


            //document.getElementById("test").style.display = 'none';


    </script>

tony19 · Accepted Answer · 2022-07-15 00:00:41Z

1

Please reference for Vue v-if, v-show https://v2.vuejs.org/v2/guide/conditional.html

<div id="codeTest">
    <input v-show="value == 1" id="input1" type="text" />
    <input v-show="value == 2" id="input2" type="text" />

    {{$data}}
</div>

<script type="text/javascript">
 var inputVM= new Vue({
     el:"#codeTest",
     data: function() {
         return {
             value: 1
         }
     },
     created: function(){
         this.getValueFromDatabase();
     },
     methods: {
         getValueFromDatabase: function() {
            const valueData = callApiMethod(); // not defined
            this.value = valueData // 1 or 2
         }
     }
 })
 </script>

edited Jul 15, 2022 at 0:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 28, 2019 at 11:03

1Rhino

2983 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Musa Over a year ago

Good hack. Thanks

Musa Over a year ago

I have tried your style and it works. However, i need to display multiple fields for value more than 1. So that for value as 2 I display input1 and input 2. So for value 3, it shall be the first 2 and another extra one. How do i go about it?Thanks in advance

1Rhino Over a year ago

@Musa You can change condition on Vue If example: <input v-show="value == 2 || value == 3" id="input1" type="text" /> <input v-show="value == 2 || value == 3" id="input2" type="text" /> <input v-show="value == 3" id="input2" type="text" />

Musa Over a year ago

@1Rhino..ua concept looks awesome..lemi try it out.. Thanks

Collectives™ on Stack Overflow

How to display input input fields on condition in VueJs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related