I am new to Vue.js and I want to render a form element only if another form select field is selected. I hope you understand what I mean.
Here st my Laravel Form:
<div class="form-group">
{!! Form::label('mailarchive', 'Mailarchive: ', ['class' => 'col-sm-3 control-label']) !!}
<div class="col-sm-6">
{!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control']) !!}
</div>
</div>
<div class="form-group">
{!! Form::label('instance', 'Instance: ', ['class' => 'col-sm-3 control-label']) !!}
<div class="col-sm-6">
{!! Form::select('mailarchive', ['Select' => 'Select', '1' => 'SV01', '2' => 'SV02'], null, ['class' => 'form-control']) !!}
</div>
</div>
The second form-group (label: instance) should only be visible when 'Gold', 'Silver' or 'Bronze' in the first select field is selected, but not visible if 'No' is selected.
Thanks for your help!
Wipsly
// Update
I edited my code to this
<div class="form-group">
{!! Form::label('mailarchive', 'Mailarchive: ', ['class' => 'col-sm-3 control-label']) !!}
<div class="col-sm-6">
{!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control v-model="mailarchive"']) !!}
</div>
</div>
<div class="form-group v-show="mailarchive !='-'"">
{!! Form::label('instance', 'Instance: ', ['class' => 'col-sm-3 control-label']) !!}
<div class="col-sm-6">
{!! Form::select('mailarchive', ['Select' => 'Select', '1' => 'SV01', '2' => 'SV02'], null, ['class' => 'form-control']) !!}
</div>
</div>
And here is my javascript
<script type="text/javascript">
new Vue({
el: '#mailarchive'
})
</script>
But nothing happens. What do I wrong?