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-顯示=一個變種「郵件存檔=！‘ - ’」