如何以编辑形式更新 laravel blade 文件中的 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 ?? '' }}">

添加整个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>

@endsection

如您所见，标题输入用于创建 slug on keyup 事件。现在给定的代码不使用数据库中的数据来预填充编辑表单标题输入字段。因为我正在使用 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

在 The End 中，我又回到了过去的做事方式。

代码如下：


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

并将输入字段中的 v-model 替换为 id 标签。

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

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

forms

edit

laravel

vuejs2