如何在选择下拉列表中隐藏和显示 vue js 表单向导选项卡？答案

【问题标题】：How to make a on select dropdown to hide and show vue js form wizard tab?如何在选择下拉列表中隐藏和显示 vue js 表单向导选项卡？
【发布时间】：2018-12-28 11:55:52
【问题描述】：

我已经使用 vue js 制作了一个表单向导，并且在第五步中，但我想选择下拉菜单到 middl 步骤，如第三步和第四步使用索引隐藏和显示。

看到这个插件：https://cristijora.github.io/vue-form-wizard/#/?id=methods

whene select hide :

当你选择显示时：

Wizard.vue

<template>
  <div>
    <div class="dropdown">
      <select name="" id="">
        <option value="hide">hide</option>
        <option value="show">show</option>
      </select>
    </div>
    <form-wizard @on-complete="onComplete">
      <tab-content title="first"
                    icon="ti-user">
        first
      </tab-content>
      <tab-content title="second"  icon="ti-settings">
        second
      </tab-content>
      <tab-content title="four" icon="ti-settings">
        four
      </tab-content>
      <tab-content title="five"
                    icon="ti-settings">
        five
      </tab-content>
      <tab-content title="Last step"
                    icon="ti-check">
        Yuhuuu! This seems pretty damn simple
      </tab-content>
    </form-wizard>
  </div>
</template>

【问题讨论】：

在选择下拉菜单中选择隐藏时是否要隐藏每个选项卡内容？
只有第二个和四个使用索引隐藏显示，因为它刚刚使用数组显示我添加静态
查看更新我的问题
我该如何解决这种情况？

标签： javascript laravel vue.js

【解决方案1】：

首先在 Wrapper 组件的data 中添加选项值为 myVal。

您可以使用条件渲染。 docs

v-if="myVal === 'hide'"

指令隐藏和显示元素。

我们可以添加样式

.tab-container {
   display:flex,
   justify-content: space-between
}

【讨论】：