vue jsによる依存ドロップダウン（ajaxなし）

Question

vue jsを使用して依存ドロップダウンを作成しようとしています。示されてはならない最初のドロップダウンが可視および2番目のドロップダウンする必要があり、私の要件ごととして

<div id="app"> 
    <div class="row"> 
     <label for="100">One</label> 
     <select v-model="val1" name="" id="100"> 
      <option value="1">one</option> 
      <option value="2">two</option> 
      <option value="3">three</option> 
     </select> 
     <div id="hide" v-if="show"> 
      <label for="200">Two</label> 
      <select name="" id="2"> 
       <option value="11">ten</option> 
       <option value="12">eleven</option> 
       <option value="13">twelve</option> 
      </select> 
     </div> 
    </div> 
</div> 

と私VUEスクリプト

<script type="text/javascript"> 
new Vue({ 
    el: '#app', 
    data: { 
     value: 2, 
     val1:'', 
     show:false 
    } 
computed: { 
    showNext: function() { 
     if (this.value == this.val1) { 
     show:true 
     } 
    } 
} 
}); 
</script> 

：私は2つのドロップダウンを作成しました。最初のドロップダウンから値2のオプションを選択し、if文を満たさない他のオプションが選択されている場合は、非表示のままにしておく必要があります。

私の場合、両方のドロップダウンはページの最初に表示されます。何がエラーなのでしょうか？

Answer 1

あなたは誤解してcomputedです。また、私はない==

、===を使用するように助言するあなたのcomputedはshow次のようになります。問題がまだそこにあると私はあなたがそれを修正するのに役立ちます場合

computed: { 
    show(): { 
     if (this.value === this.val1) { 
     return true; 
     } 
    else 
     return false; 
    } 
} 

クイックJSFiddleを作成してください。