vue display:none,@click @change失效有啥办法解决吗

Question

外层的dom设置了display：none，里面的的插值{{XXX}}都没问题，但是@click @change 都是失效了，请问这是什么问题，感谢，有其他思路解决吗

<div class="tt" style="display:none;">
    <form class="layui-form layer-dl" action="" style="padding: 25px 25px 25px 0">
        <div class="layui-form-item">
            <label class="layui-form-label">涉及订单：</label>
            <p class="title">{{order}}</p> 
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">联系电话：</label>
            <p class="title">{{phone}}</p>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">截图上传</label>
            <div class="layui-input-block">
                <input ref="myFile" @change="getFile($event)" type="file">
            </div>
        </div>
    </form>
    <a class="sub-tt" @click="submitAfterForm()">下一步</a>
</div>

Answer 1

dislpay:none

拼写错了

Answer 2

换成这个试试吧

width:0;height:0;overflow: hidden;

Answer 3

我好奇的是，他都看不到了，你是怎么单击的呢？

如果是js，那么你完全可以去调用那个方法了。

Answer 4

display:none或者visibility: hidden相同点都是隐藏元素和不能触发事件，区别是后者隐藏元素仍需占用与未隐藏时一样的空间，你这种场景可以使用opacity: 0, 视觉上是隐藏，但能触发事件