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，我将帮助您解决问题。

使用vue js的依赖下拉列表（不带ajax）

1 个答案: