Question

Vue.js初学者： - ）

我有一些testblock个div，它们有teststep个子div。有一个testblock切换按钮可切换所有testblock个元素，每个testblock都有一个切换按钮可切换其子teststeps：

<div id="app">
    <div><button class="btn btn-lg btn-primary" @click="showTestblock = !showTestblock">Toggle testblocks</button></div>
    <div v-if="showTestblock">Testblock-1</div>
        <div v-if="showTestblock"><button class="btn btn-lg btn-primary" @click="showTeststep = !showTeststep">Toggle teststeps</button></div>
        <div v-if="showTeststep">Teststep-1a</div>
        <div v-if="showTeststep">Teststep-1b</div>
    <div v-if="showTestblock">Testblock2</div>
        <div v-if="showTestblock"><button class="btn btn-lg btn-primary" @click="showTeststep = !showTeststep">Toggle teststeps</button></div>
        <div v-if="showTeststep">Teststep-2a</div>
        <div v-if="showTeststep">Teststep-2b</div>
    <div v-if="showTestblock">Testblock3</div>
        <div v-if="showTestblock"><button class="btn btn-lg btn-primary" @click="showTeststep = !showTeststep">Toggle teststeps</button></div>
        <div v-if="showTeststep">Teststep-3a</div>
        <div v-if="showTeststep">Teststep-3b</div>
</div>

Vue代码：

new Vue({
  el: '#app',
  data: {
    showTestblock: false,
    showTeststep: false
  }
})

有两个问题：

切换teststep切换所有测试步骤，而不仅仅是切换步骤具体testblock。在JQuery中我会添加一个ID，但是有一个Vue 更好的方法吗？
显示teststeps并且testblock切换按钮为单击，测试块不再显示，但teststeps 是。如何关闭孩子？

更新：

使用正确的嵌套更新代码：

<div id="app">
    <div><button class="btn btn-lg btn-primary" @click="showTestblock = !showTestblock">Toggle testblocks</button>
        <div v-if="showTestblock"><span>Testblock-1</span>
            <div v-if="showTestblock"><button class="btn btn-lg btn-primary" @click="showTeststep = !showTeststep">Toggle teststeps</button>
                <div v-if="showTeststep">Teststep-1a</div>
                <div v-if="showTeststep">Teststep-1b</div>
            </div>
        </div>
        <div v-if="showTestblock"><span>Testblock-2</span>
            <div v-if="showTestblock"><button class="btn btn-lg btn-primary" @click="showTeststep = !showTeststep">Toggle teststeps</button>
                <div v-if="showTeststep">Teststep-2a</div>
                <div v-if="showTeststep">Teststep-2b</div>
            </div>
        </div>
        <div v-if="showTestblock"><span>Testblock-3</span>
            <div v-if="showTestblock"><button class="btn btn-lg btn-primary" @click="showTeststep = !showTeststep">Toggle teststeps</button>
                <div v-if="showTeststep">Teststep-3a</div>
                <div v-if="showTeststep">Teststep-3b</div>
            </div>
        </div>
    </div>
</div>

Vue.js切换特定项目

0 个答案: