J_shelfwood
3 years ago
2240
4
Vue

Vue js lose focus event on input

Posted 3 years ago by J_shelfwood

Hey guys,

I've got this component that consists of a button and a input field with display: none, when one clicks the button it is replaced by a input field and their cursor is placed inside this input field. However, I'd like to make it revert back when you click outside of this field. Is there some kind of event that tracks a user's focus on the input?

<template>
    <div class="categoryCreate">
        <section class="categoryCreate__button" v-if="!showfield" @click="showfield = true">
            <button class="base__button">Add Category</button>
        </section>
        <input class="categoryCreate__textfield" type="text"
            v-model="category.name"
            v-else
            @keyup.enter="createCategory()"
            placeholder="Enter a name + enter"
            autofocus>
    </div>
</template>

<script>
    export default
    {
        data() {
            return {
                category: {
                    name: '',
                    category_id: ''
                },
            showfield: false
            }
        },
        props: ['parentcategory'],
        methods: {
            createCategory() {
                this.category.category_id = this.parentcategory
                this.$http.post('/api/categories', this.category).then((response) => {
                    Bus.$emit('new-category')
                    this.category.name = ''
                    this.showfield = false
                }, (response) => {
                  console.log('failed to store')
       
                });
            }
        }
    }
</script>

Please sign in or create an account to participate in this conversation.