单击元素时执行操作

Question

下面的代码允许我在我的应用程序中有一个 click-to-edit header 标签。

我正在寻找在页面上执行任何其他操作时处理退出编辑模式的最佳方法...单击或 drag-n-drop。

<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()"
/>

单击元素时执行操作

Performing action when clicking off an element

vue.js