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

li的点击事件可以使用@mousedown来做点击事件,它的权重比blur更高
亲测有效

Answer 3

你可以使用v-if试一试