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

Question

我有一个用于创建和更新类别数据的文件。

在创建类别时，我在标题中使用v-model 也以相同的形式创建 slug。

创建时效果很好，但我面临更新/编辑表单部分的问题。

下面是我的代码：

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

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

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

谢谢

Answer 1

您可以将 app.js 代码移动到 Blade 视图并使用 Blade 表达式填充 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 标签。