依賴下拉與vue js（不含阿賈克斯）

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的選項，並且如果選擇了其他值不符合if語句的其他選項，則應該保持隱藏狀態。

但在我的情況下，這兩個下拉菜單在頁面開始時都可見。什麼可能是錯誤？

Answer 1

您錯過了computed。另外，我建議使用===，不==

你computed應該是show：

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

嘗試創建快速的jsfiddle如果問題仍然存在，我會幫你解決它。