title: Laravel Vue.js Conditional Rendering
body: <p>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.</p>
  
  <p>Here st my Laravel Form:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      {!! Form::label('mailarchive', 'Mailarchive: ', ['class' =&gt; 'col-sm-3 control-label']) !!}
      &lt;div class="col-sm-6"&gt;
          {!! Form::select('mailarchive', ['-' =&gt; 'No', 'Gold' =&gt; 'Gold', 'Silver' =&gt; 'Silver', 'Bronze' =&gt; 'Bronze'], null, ['class' =&gt; 'form-control']) !!}
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      {!! Form::label('instance', 'Instance: ', ['class' =&gt; 'col-sm-3 control-label']) !!}
      &lt;div class="col-sm-6"&gt;
          {!! Form::select('mailarchive', ['Select' =&gt; 'Select', '1' =&gt; 'SV01', '2' =&gt; 'SV02'], null, ['class' =&gt; 'form-control']) !!}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks for your help!</p>
  
  <p>Wipsly</p>
  
  <p><strong>// Update</strong> </p>
  
  <p>I edited my code to this</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      {!! Form::label('mailarchive', 'Mailarchive: ', ['class' =&gt; 'col-sm-3 control-label']) !!}
      &lt;div class="col-sm-6"&gt;
          {!! Form::select('mailarchive', ['-' =&gt; 'No', 'Gold' =&gt; 'Gold', 'Silver' =&gt; 'Silver', 'Bronze' =&gt; 'Bronze'], null, ['class' =&gt; 'form-control v-model="mailarchive"']) !!}
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="form-group v-show="mailarchive !='-'""&gt;
      {!! Form::label('instance', 'Instance: ', ['class' =&gt; 'col-sm-3 control-label']) !!}
      &lt;div class="col-sm-6"&gt;
          {!! Form::select('mailarchive', ['Select' =&gt; 'Select', '1' =&gt; 'SV01', '2' =&gt; 'SV02'], null, ['class' =&gt; 'form-control']) !!}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      new Vue({
          el: '#mailarchive'
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>But nothing happens. What do I wrong?</p>