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?

share|improve this question
    
This is more of a JS question than a laravel blade one. – Mysteryos Nov 6 '15 at 10:30
    
Maybe... I have laravel in my topic because of the Laravel Blade Engine and HTML | Form Facade. – Wipsly Nov 6 '15 at 10:52
up vote 2 down vote accepted

A lot to tackle here. First, you should set a "parent" Vue instance rather than creating a new Vue instance for individual input fields. For example, lets say you want to make the entire form a Vue instance, then when you open your form, set an id like this:

{!! Form::open(['id' => 'example']) !!}

Then, when you create your Vue instance, reference that id:

<script type="text/javascript">
    new Vue({
        el: '#example'
    })
</script>

Next, this code you have is incorrect:

{!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control v-model="mailarchive"']) !!}

Specifically, pay attention to this part: ['class' => 'form-control v-model="mailarchive"']

What you are doing here is creating some weird class. When you specify extra HTML attributes, you need to pass an array of those attributes like this:

{!! Form::select('mailarchive', ['-' => 'No', 'Gold' => 'Gold', 'Silver' => 'Silver', 'Bronze' => 'Bronze'], null, ['class' => 'form-control', 'v-model' => 'mailarchive']) !!}

From there, another problem is how you are using v-show.

This is what you have: <div class="form-group v-show="mailarchive !='-'"">

Once again, for some reason, you are putting v-directives inside your class. Instead, use it as its own HTML attribute like this:

<div class="form-group" v-show="mailarchive !== '-'">

All that together, you should see something like this:

{!! Form::open(['id' => 'example']) !!}
    <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>
    {!! Form::submit() !!}
{!! Form::close() !!}
</div>
<script>
new Vue({
    el: '#example'
});
</script>

Here is a working example on jsfiddle: http://jsfiddle.net/zj8hwjc9/1/

share|improve this answer
    
Wow, thank you very much! That was a very god explanation! It works! – Wipsly Nov 6 '15 at 17:27
    
Awesome! I'm glad it works for you. – Thomas Kim Nov 6 '15 at 17:34

You will need to bind the first field to a var with v-model="mailArchive" then on the second form group use v-show="mailArchive !='-'"

share|improve this answer
    
Can you give me an example? – Wipsly Nov 6 '15 at 14:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.