how to hide and display a form when I click on button use vuejs

Question

help me please, i want when i click the validate button i want to display form 2 and cache form 1, knowing that at the beginning i want to display form 1 and hide form 2, in my code when I click on the validate shows me the form 2 and also the form 1, but I want the form 1 to hide. form 1:

<div>
<h3>form group 1</h3>
@if ($message = Session::get('success'))
<div class="alert alert-success">
    <p>{{ $message }}</p>
</div>
@endif

 {!! csrf_field() !!}
<div class="form-group">
 <label>Date:</label>
  <input type="date" id="datePicker" name="date" class="form-control" placeholder="date naissance">
 </div>

Nbre de jour

valider form 2

 <div v-if="open">
   <table class="table table-bordered" id="mytable">
        <tr>
            <th>salaire net</th>
            <th>nbre de jour </th>
            <th>prime</th>
        </tr>
        @if($salaries->count())
            @foreach($salaries as $key => $salarie)
                <tr id="tr_{{$salarie->id}}">
                  <td>{{ $salarie->matricule }}</td>
                  <td >{{ $salarie->nom }} {{ $salarie->prenom }}</td>
                  <td><input type="hidden" name="salaire" value="{{ $salarie->salairenet }}">{{ $salarie->salairenet }}</td>
                </tr>
            @endforeach
        @endif
    </table>

    <div class="form-group col-md-offset-5 ">
    <button class="btn btn-success " type="submit" >Pointage mensuel</button>
    </div>
 </div>

code vuejs :

<script src="{{asset('js/Vue.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            open: false,

        },
      });
</script>

Don't use blade @if inside vue components. Declare all php variables as vue data, and use v-if instead. — Christhofer Natalius
– Christhofer Natalius, Commented Jun 16, 2019 at 2:31

tony19 · Accepted Answer · 2022-07-15 02:24:34Z

1

Use v-if and v-else directives. You are already using v-if="open" in the form 2. Add v-else to the div container of the form 1. Keep in mind that always v-if has to be put before v-else.

You can read more about conditional rendering in the docs: https://v2.vuejs.org/v2/guide/conditional.html

edited Jul 15, 2022 at 2:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 15, 2019 at 23:12

José Silva

4113 silver badges13 bronze badges

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

1 Comment

Najib Marzouk Over a year ago

thx for u answer but i cant resolve my brlm ,i use else but without interest, i will search more

Collectives™ on Stack Overflow

how to hide and display a form when I click on button use vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related