使用 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

你误会了computed。另外，我建议使用 === ，而不是 ==

你的 computed 应该是 show :

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

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

使用 vue js 的依赖下拉列表（没有 ajax）

Dependent dropdown with vue js (without ajax)

javascript

vue.js

vuejs2