Как обновить данные v-модели в файле лезвия laravel в форме редактирования

Question

У меня есть один файл для создания и обновления данных категории.

при создании категории, я использую v-model в заголовке, чтобы также создать слаг в той же форме.

работаетхорошо при создании, но я столкнулся с проблемой с обновлением / редактированием части формы.

ниже мой код:

<input class="form-input mt-1 block w-full" name="name" v-model="title" v-on:keyup="getSlug" placeholder="Category Title" value="{{ $category->name ?? '' }}">

добавление всего кода блейд-файла для справки:

@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>
            <a href="{{route('category.index')}}" class="border rounded px-4 py-2">Back</a>
        </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

, поскольку вы можете видеть, что ввод заголовка используется для создания слагапо событию keyup. теперь данный код не использует данные из базы данных для предварительного заполнения поля ввода заголовка формы редактирования. потому что я использую v-model="title", который находится в моем app.js и является нулевым в данный момент.

Как назначить v-model="title" мое текущее значение из database.

Это не компонент vue. это файл laravel blade. Пожалуйста, ведите меня за это.

Спасибо

Answer 1

В конце я вернулся к старому стилю ведения дел.

код, как показано ниже:

getSlug() {
        var title = document.getElementById('title').value;
        document.getElementById('slug').value = title.replace(/\s+/g, '-').toLowerCase().trim();
      },

и заменил v-model тегом id на входеполе.

Answer 2

Вы можете переместить код app.js в представление Blade и заполнить title выражением Blade

@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>
        <a href="{{route('category.index')}}" class="border rounded px-4 py-2">Back</a>
    </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

Надеюсь, это поможет