vue的v-show和@click的一个问题

Question

组件中的一个模板如图初始ifShow为false 所以class='property' 的 ul 不显示通过focus事件触发改变ifShow的值为true使class='property' 的 ul 显示问题通过focus事件触发显示的ul click事件无效..而如果在ifShow为false的情况下 手动更改此时ul 的display属性为block时, ul显示出来并且click事件有效    template: `    <div class='outside'>        <ul class='input'>            <li>                <ul class='box'>                    <li>                        <div style='display:inline-block;overflow:hidden' v-if='tagsLength > 0'>                            <span class='tag' v-for='(tag, index) in tags'>{{ tag.name }} <a href='#' @click='delTag(index)'>x</a></span>                        </div>                        <input :value='value' @input='$emit("input", $event.target.value)' @keyup.enter='onEnter' class='content' @focus='onFocus' @blur='onBlur'>                    </li>                    <li style='position:absolute;background:#fff;z-index:999'>                        <ul class='property' v-show='ifShow'>                            <li>{{ propertyHint }}</li>                            <li v-for='property in properties' @click='onClick(property)' :data-id='property.id'>{{ property.name }}</li>                        </ul>                    </li>                </ul>            </li>        </ul>        <div class='help-tips'>            <p>{{ inputHint }}</p>        </div>    </div>`

Answer 1

点击ul中的li时：

在ul的click事件触发之前，li的blur事件先被触发了，所以ul的click事件不会触发。

解决办法：

1. 给blur事件添加延时。

2. 在click事件中修改isShow的值为false。

Answer 2

你可以使用v-if试一试