如何以编辑形式更新laravel刀片文件中的v-model数据

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事件中创建子弹。现在，给定的代码不使用数据库中的数据来预先填充编辑表单标题输入字段。因为我正在使用app.js中的v-model="title"，目前为null。

如何从v-model="title"中分配database我的当前值。

这不是vue组件。其laravel blade文件。请为此指导我。

谢谢

Answer 1

您可以将app.js代码移至“刀片”视图并使用“刀片”表达式填充title

@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

希望这会有所帮助

Answer 2

最后，我回到了旧的做事风格。

代码如下：

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

并且在输入字段上用v-model标记替换了id。