Question

请帮我，当我单击验证按钮时，我想显示表格2并缓存表格1，我知道一开始我想在我的代码中显示表格1并隐藏表格2， validate向我显示了表单2和表单1，但我希望隐藏表单1。表格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>

日报

验证者表格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>

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

Answer 1

使用v-if和v-else指令。您已经在使用表单2的v-if="open"。将v-else添加到表单1的div容器中。请记住，始终必须将v-if放在{{ 1}}。

您可以在文档中了解有关条件渲染的更多信息：https://vuejs.org/v2/guide/conditional.html

当我单击按钮时如何使用vuejs隐藏和显示表单

1 个答案: