vue 点击失去焦点问题

Question

如图点击input外部分要使得 input失去焦点，并且input框消失。

---

组件部分代码，
尝试用@blur="blur()"但是只有第一次失焦时成功。

<template>
 <li @click='handleOpen'
     @mouseover="domouseover"
     @mouseout="domouseout"
     ref = "itemWrap"
     ><span>{{item.name}}</span><v-input autofocus @click.native.stop type="text" @blur="blur()"  @enter="handleSave" v-model="info.name" v-if="!bEdit" ></v-input><i class="favorite-item-num badge bg-light-grey">{{item.wikiNum}}</i>
   <div v-show="hover_control" class="favorite-item-btn">
     <a v-if="bEdit" href="javascript:;" title="编辑" @click.stop="handleEdit"><i class="fa fa-edit"></i></a>
     <a v-else href="javascript:;" title="保存编辑"  class="save" @click.stop='handleSave'> <i class="fa fa-check-square-o"></i></a>
      <a slot="trigger" title="删除" @click.stop="handleDel" href="javascript:;"><i class="fa fa-trash"></i></a>
   </div>
 </li>
</template>

Answer 1

v-if表示如果false，就不添加节点。 你改成v-show试试。