Laravel Vue.js有条件呈现

Question

我是Vue.js的新手，我只想在选中另一个表单选择字段的情况下呈现表单元素。我希望你明白我的意思。

这里ST我Laravel形式：

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

第二种形式组（标签：实例）时，所选的第一个选择栏“金”，“银”或“青铜”只应可见，但如果选择“否”则不可见。

感谢您的帮助！

Wipsly

//更新

我修改了代码，这

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

这里是我的javascript

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

但没有任何反应。我错了什么？

Answer 1

很多解决这里。首先，你应该设置一个“父”Vue实例，而不是为单个输入字段创建一个新的Vue实例。例如，假设你想使整个形式的Vue公司的实例，那么当你打开你的形式，设置这样一个ID：

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

然后，当你创建Vue的情况下，参考该ID：

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

接下来，该代码必须是不正确的：

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

具体而言，要注意这部分：['class' => 'form-control v-model="mailarchive"']

你在这里做的是创造一些奇怪的类。当您指定额外的HTML属性，你需要通过这些属性的数组是这样的：

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

从这里，另一个问题是你如何使用v-show。

这是你拥有的一切：<div class="form-group v-show="mailarchive !='-'"">

再次，出于某种原因，你是把V-指令类里面。相反，把它作为自己的HTML属性是这样的：

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

所有这一切放在一起，你会看到这样的事情：

{!! 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> 

这里是的jsfiddle工作示例：http://jsfiddle.net/zj8hwjc9/1/

Answer 2

您将需要第一个字段绑定到与V-模型=“邮件存档”，然后在第二表单组使用V-显示=一个变种“邮件存档=！‘ - ’”