javascript - 使用 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 的选项，则应显示该值；如果选择了不满足 if 语句的其他选项，则应保持隐藏状态。

但就我而言，两个下拉列表都在页面开头可见。可能是什么错误？

Answer 1

您误解了计算。另外，我建议使用 === ，而不是 ==

您的计算应该是show:

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

如果问题仍然存在，请尝试创建快速 JSFiddle，我会帮助您解决它。