單擊元素時執行操作

Question

以下代碼允許我在應用程序中使用點擊編輯標題標籤。

我正在尋找處理時，頁面上進行任何其他操作退出編輯模式的最佳方式......無論是點擊或拖拽正下降。

<validator name="teamSetValidation"> 
    <input id='teamSetName' v-if="isEditingName" type="text" v-model="teamSet.name" class="semi-bold p-t-10 p-b-10 m-l-15 edit-header" v-on:keyup.enter="saveTeamSetName()" v-on:keyup.esc="doneEditing()" v-validate:name.required.maxlength="teamSetRules" :isEditingName="true"/> 
    <h3 v-else class="semi-bold p-t-10 p-b-10 m-l-15" v-on:click="editing()" :isEditingName="false">{{ teamSet.name }} <span class="fa fa-edit"></span></h3> 
    <div class="text-small"> 
     <span class="text-danger" v-if="$teamSetValidation.teamSet.name.required">A name is required.</span> 
     <span class="text-danger" v-if="$teamSetValidation.teamSet.name.maxlength">The name you provided is too long.</span> 
    </div> 
    <div class="b-grey b-b m-t-10"></div> 
</validator> 

的Javascript：

var vm = new Vue({ 
    el: '#page', 
    data: { 
     // When true, user can edit the teamSet name 
     isEditingName: false, 

     teamSet: teamSet, 
     teamSetRules: { 
      required: false, 
      maxlength: 64 
     } 
    }, 
    methods: { 
     editTeamSetName: function() { 
      alert('editing'); 
     }, 
     saveTeamSetName: function() { 
      if(this.$teamSetValidation.valid) { 
       this.doneEditing(); 
       var teamSet = this.teamSet, 
        self = this; 

       $.ajax({ 
        url: '/team/'+teamSet.id, 
        type: 'PATCH', 
        data: { 
         'name': teamSet.name 
        }, 
        error: function(res) { 

         Messenger().post({ 
          message: 'Unable to save changes', 
          type: 'error', 
          hideAfter: 3 
         }); 

         self.editing(); 
        } 
       }); 
      } 
     }, 
     editing: function() { 
      this.isEditingName = true; 
      Vue.nextTick(function() { 
       $('#teamSetName').focus(); 
      }); 
     }, 
     doneEditing: function() { 
      this.isEditingName = false; 
     } 
    } 
}); 

Answer 1

附加一個模糊事件的輸入應該做的伎倆：

<input id='teamSetName' v-if="isEditingName" 
type="text" v-model="teamSet.name" 
class="semi-bold p-t-10 p-b-10 m-l-15 edit-header" 
v-on:keyup.enter="saveTeamSetName()" 
v-on:keyup.esc="doneEditing()" 
v-validate:name.required.maxlength="teamSetRules" 
:isEditingName="true" v-on:blur="doneEditing()" 
/>