Slug Component Example

component_slug.vue

<template>
    <input type="text" v-model="value">
</template>

<script type="text/ecmascript-6">
    export default {
        name: "slug",

        props: {
            title:{ default:"" }
            apiUrl: { required: true },
        },

        data() {
            return {
                value: "",
                autoGenerate: true,
            }
        },
        watch: {
            title: {
                handler: function(title) {
                  this.generate(title)
                },
            },
        },

        methods: {
            generate(title) {
                const vm = this
                
                this.$root.disableInterceptor()
                
                window.axios.get(vm.apiUrl, {
                    params: {
                        title: title,
                    },
                }).then(function(response) {
                    vm.value = response.data
                    vm.$emit("change", { "slug": response.data })
                    
                    vm.$root.enableInterceptor()
                }).catch(function(error) {
                    console.error(error)
                    
                    vm.$root.enableInterceptor()
                })
            },
        },
    }
</script>