How to update v-model data in laravel blade file in edit form - laravel

Question

I have a single file for creating and updating the category data.
while creating category, i am using v-model in title to also create slug in the same form.
works well when creating but i am facing issue with update / edit form part.
below is my code :
<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug" placeholder="Category Title" value="{{ $category->name ?? '' }}">
adding whole blade file code for reference:
#extends('layouts.backend.app')
#php
if(isset($record) && $record != null){
$edit = 1;
} else {
$edit = 0;
}
#endphp
#section('content')
<section id="app" class="container mx-auto">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold">
#if($edit) Edit #else Create #endif Category Form
</h1>
Back
</div>
<div class="border rounded mt-8 p-8">
<form action="#if($edit) {{route('category.update', $record->id)}} #else {{route('category.store')}} #endif" method="POST">
#csrf
<label class="block mb-4">
<span class="text-gray-700 font-bold">Name</span>
<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug" placeholder="Category Title" value="{{ $category->name ?? '' }}">
#error('name')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-4">
<span class="text-gray-700 font-bold">Slug</span>
<input
class="form-input mt-1 block w-full"
name="slug"
id="slug"
v-model="slug"
placeholder="Slug / Pretty URL">
#error('slug')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-8">
<span class="text-gray-700 font-bold">Banner</span>
<input
class="form-input mt-1 block w-full"
name="banner"
value="#if($edit) {{$record->banner}} #else https://source.unsplash.com/random #endif"
placeholder="Banner / URL">
</label>
<div class="flex justify-between">
<button class="px-4 py-2 border bg-gray-200 text-gray-900 rounded" type="submit">Submit</button>
<button class="px-4 py-2 border bg-red-400 text-white rounded" type="rest">Reset</button>
</div>
</form>
</div>
</section>
#endsection
as you can see the title input is use to create the slug on keyup event. now the given code don't use the data from database for pre populating the edit form title input field. because i am using v-model="title" which is in my app.js and is null at the moment.
How to either assign v-model="title" my current value from database.
This is not a vue component. its a laravel blade file. Kindly guide me for this.
Thanks

Answer 1

You can move the app.js code to the Blade view and populate title with the Blade expression
#extends('layouts.backend.app')
#php
if(isset($record) && $record != null){
$edit = 1;
} else {
$edit = 0;
}
#endphp
#section('content')
<section id="app" class="container mx-auto">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold">
#if($edit) Edit #else Create #endif Category Form
</h1>
Back
</div>
<div class="border rounded mt-8 p-8">
<form action="#if($edit) {{route('category.update', $record->id)}} #else {{route('category.store')}} #endif"
method="POST">
#csrf
<label class="block mb-4">
<span class="text-gray-700 font-bold">Name</span>
<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug"
placeholder="Category Title" value="{{ $category->name ?? '' }}">
#error('name')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-4">
<span class="text-gray-700 font-bold">Slug</span>
<input class="form-input mt-1 block w-full" name="slug" id="slug" v-model="slug"
placeholder="Slug / Pretty URL">
#error('slug')
<span class=" text-red-400 invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</label>
<label class="block mb-8">
<span class="text-gray-700 font-bold">Banner</span>
<input class="form-input mt-1 block w-full" name="banner"
value="#if($edit) {{$record->banner}} #else https://source.unsplash.com/random #endif"
placeholder="Banner / URL">
</label>
<div class="flex justify-between">
<button class="px-4 py-2 border bg-gray-200 text-gray-900 rounded" type="submit">Submit</button>
<button class="px-4 py-2 border bg-red-400 text-white rounded" type="rest">Reset</button>
</div>
</form>
</div>
</section>
{{-- Place the script here, after closing the section with id of app --}}
<script>
const app = new Vue({
el: '#app',
data() {
return {
title: '{{ $category->name }}'
}
},
methods: {
getSlug() {
this.title = this.title.toLowerCase()
.replace(/ /g,'-')
.replace(/[^\w-]+/g,'');
}
}
});
</script>
#endsection
Hope this helps

Answer 2

In The End, I went back to the old style of doing things.
code as below:
getSlug() {
var title = document.getElementById('title').value;
document.getElementById('slug').value = title.replace(/\s+/g, '-').toLowerCase().trim();
},
and replaced v-model with id tag on the input field.