vue.js - Vue：嵌套条件模板，它们可以工作，但它是最佳实践吗？

Question

我试图搜索和抓取所有文档但没有成功。我是 vue.js 的新手，但不是 JS 的新手。作为学习教程，我正在将我的一些旧代码从 vanilla/jquery 转换为 vue.js。我现在面临的挑战是嵌套条件模板。

我有这个基本形式，我只想在满足某些条件时展示它的一部分。我发现的第一个解决方案是嵌套条件模板，它实际上就像一个魅力，但我想知道我是否以正确的方式做这件事。

我从片段中删除了所有不必要的东西（引导程序，...）

来自终身 Vue 开发者的任何建议？非常感谢

    var form_one = new Vue({
        el: '#app',
        data: {
            errors: [],
            type: "default",
            mainFormToggle: null,
            wasMeeting: "default",
        },
        methods: {
            preCheck: function (e) {
                this.errors = []; // removes any errors eventually shown in the page

                if (this.type) {
                    this.mainFormToggle = true;
                }
                if (!this.type) {
                    this.errors.push('Please select a course type!');
                    this.mainFormToggle = false;
                }
            }
        }
    });

<div id="app">
    <select class="form-control" id="type" v-model="type" @change="preCheck()" name="type">
        <option value="default" disabled selected>Choose the correct type to be initiated</option>
        <option value="one">one</option>
        <option value="two">two</option>
    </select>

    <!-- FIRST CONDITIONAL "ROOT" TEMPLATE -->
    <template id="form-two" v-if="mainFormToggle">
        <div><label for="firstName">First Name</label>
            <input type="text" class="form-control form-control-sm" id="firstName" v-model="firstName"></div>

        <!-- FISRT NESTED CONDITIONAL TEMPLATE -->
        <template v-if="type === 'one'">
            <div> <label for="wasMeeting">Was a meeting held?</label>
                <select class="form-control" id="wasMeeting" v-model="wasMeeting">
                    <option value="default" disabled selected>Choose an option</option>
                    <option value="y">Yes</option>
                    <option vlaue="n">No</option>
                </select></div>

            <!-- SECOND CONDITIONAL NESTED TEMPLATE -->
            <template v-if="wasMeeting === 'y'">
                <div> <label for="meeting-by-who">By which teacher was the Meeting held?</label>
                    <textarea class="form-control form-control-sm" id="meeting-by-who" placeholder=""
                        rows="5"></textarea></div>
            </template>
        </template>
    </template>
</div>

标签： vue.js