Building Slug based on Title in a blog post CRUD.

Hi,

In a simple blog admin panel, I want when I type the Title input, the Slug build automatically in slug input:

let builtSlug = ref('');
const title = ref('');

//build a slug
watch(title, (newTitle) => {
    builtSlug.value = newTitle.replace(' ', '-');
})

There are two problems here:

1: If I type "An awesome title", the slug would be "An-awesome title"! It just change first space not others.

2: If I type "An awesome title" for title and slug become "An-awesome-title" correctly, but I want to change it to "a-good-post" by typing in slug input, it doesn't work and I can't change slug input content. It's kind of frozen.

May you guide me to solve these two problems please?

Thank you

tykus

3 years ago

Level 104

Use replaceAll rather than replace - usually slugs are lowercase as well...

builtSlug.value = newTitle.toLowerCase().replaceAll(' ', '-')

This is a naive computation and takes no account of potential collisions in the database

I can't change slug input content. It's kind of frozen.

Can you show the template where the builtSlug input is used?

1 like

suddy

3 years ago

Level 1

@tykus Thank you for the solution.

this is where it used:

<form @submit.prevent="submit">
                                <div>
                                    <BreezeLabel for="title" value="Tile:" />
                                    <BreezeInput id="title" type="text" class="mt-1 block w-full" v-model="title" required autocomplete="title" />
                                </div>

                                <div class="mt-4">
                                    <BreezeLabel for="slug" value="Slug:" />
                                    <BreezeInput id="slug" :value="builtSlug"
                                    type="text" class="mt-1 block w-full" v-model="form.slug" required autocomplete="slug" />
                                </div>

tykus

3 years ago

Level 104

@suddy you have a value and a v-model attribute on the Input; which is it?

<BreezeInput 
    id="slug" 
    :value="builtSlug"
    v-model="form.slug" 
    type="text" 
    class="mt-1 block w-full" 
    required 
    autocomplete="slug" 
/>

1 like

suddy

3 years ago

Level 1

@tykus Sorry I'm new at vue+Inertia.

Having value and v-model in same input is wrong?

It's 'useForm' for sending data to back-end after submit.

const form = useForm({
    title: '',
    content: '',
    slug: '',
    primary_pic: '',
    category_id: '',
});

Please or to participate in this conversation.