dragonfly9527 2015-11-06 09:57 采纳率: 100%
浏览 72
已采纳

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条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 在线教育培训平台,主要以点播视频和在线练习测试为主,除将视频做切片外,有其他哪种方式降低流量?(关键词-带宽速率)
      • ¥20 用c语音或c++实现银行叫号系统
      • ¥15 人工智能 规则正向演绎和推理
      • ¥20 基于STM32F401的电子密码锁设计
      • ¥15 famamacbeth回归中遇到only size-1 arrays can be converted to Python scalars,求解答
      • ¥15 单片机多个自锁按键的编程实践
      • ¥15 用python操作redis存储中文后,再取出的数据变成了乱码怎么办?
      • ¥15 C语言简单排序问题有偿求解
      • ¥20 请问图片的代码什么意思
      • ¥15 coq问题求带,有偿