依赖下拉与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如果问题仍然存在，我会帮你解决它。