单击某个元素时执行操作

下面的代码使我可以在应用程序中具有点击编辑标题标签。

当页面上执行任何其他操作时，我正在寻找处理退出编辑模式的最佳方法……单击或拖放。

<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;
        }
    }
});