Question

我有一个带有下拉菜单的自定义表单组件，我也将其创建为自定义组件。我似乎无法隐藏下拉列表，因为我不能在div元素上使用name属性。

每个表单对于用户所需的信息都是唯一的，所以我在道具上添加了道具：['inputs']以便我可以按照表单显示输入字段

表单组件当前看起来像这样，但UI仍然可以看到下拉列表。

将注入到表单模板中，但每次引用时我希望能够将其声明为false以便不显示。关于如何实现这一点的任何想法。在此先感谢。

<vue-form :data-dropdown="false" :inputs="{ 'name': true, 'surname': true, 'email': true, 'city': true, 'province': true, 'country': true }"></vue-form>

我的自定义下拉列表的HTML：

<div class="row">
    <div data-dropdown="data-dropdown" class="col-md-6 col-lg-6 pull-left" style="padding-right: 0px">

        <div class="o-pf-required pull-left">*</div>
        <div class="o-pf-dropdown" @click="showDropMenu"><span class="o-pf-dropmenu__label">{{ titleDescription[0] }}</span> <div class="o-pf-dropdown__arrow pull-right"></div></div>

        <ul class="o-pf-select col-md-11 col-lg-11" v-show="showMenu" :class="">
          <li class="o-pf-select__option" v-for="title in titleDescription">{{ title }}</li>
        </ul>

    </div>
</div>

props: ['data-dropdown']

如何在div元素上使用data-attribute来隐藏自定义下拉列表+ VueJs

0 个答案: