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试一试