dragonfly9527
dragonfly9527
采纳率100%
2015-11-06 09:57

Laravel Vue.js有条件渲染

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?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • doukanhua0752 doukanhua0752 6年前

    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/

    点赞 评论 复制链接分享
  • douzhe3516 douzhe3516 6年前

    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 !='-'"

    点赞 评论 复制链接分享