component is shown in figure
initial ifShow is false so ul of class="property" does not show
change the value of ifShow to true so that ul of class="property" shows
question
the ul click event triggered by the focus event is invalid.
but if you manually change the display attribute of ul to block when the < false is false, the ul is displayed and the click event is valid
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="-sharp" @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:-sharpfff;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">
{{ inputHint }}
</div>
</div>
`