Laravel中Vue.js 2文本输入框数据绑定失败求助

Hey there! Let's sort out why your v-model isn't working with the text input and textarea, even though you can display the post title correctly with @{{ postData.title }}.

The Root Cause #

The problem lies in how you're passing the Laravel $post model to Vue's postData property. When you do <?php echo $post ?>, you're outputting the string representation of the Laravel model object (like App\Models\Post Object (...)), not a valid JSON object that Vue can parse. Vue ends up treating postData as a string instead of an object, so v-model can't bind to properties like postData.title or postData.post.

Step-by-Step Fixes #

1. Pass the Post Data as Valid JSON

Instead of echoing the raw model, convert it to JSON. Laravel Blade has a handy @json() directive that safely encodes data to JSON (it handles escaping automatically):

Update your Vue.js code to:

var edit = new Vue({
    el: '#postEdit',
    data: {
        postData: @json($post),
    },
    methods: {
    },
});

Alternatively, if you prefer using raw PHP, use json_encode():

var edit = new Vue({
    el: '#postEdit',
    data: {
        postData: <?php echo json_encode($post) ?>,
    },
    methods: {
    },
});

2. Ensure the Post Object Exists

To avoid cases where $post might be null (if the ID doesn't exist), update your controller to use findOrFail() instead of find()—this will throw a 404 error if the post isn't found, preventing Vue from trying to bind to an undefined object:

public function edit($id){
    $post = Post::findOrFail($id);
    return view('post.edit', compact('post'));
}

3. Verify Field Names Match

Double-check that your Post model has the title and post attributes (matching your database column names). If your content column is named something else (like content), you'll need to update the v-model to match:

<textarea v-model="postData.content"></textarea>

Full Updated Code Snippets #

Blade/HTML Code

<div id="postEdit">
    <div class="container">
        <div class="row">
            <form class="form-horizontal" method="POST">
                @csrf <!-- Replace the meta tag with Laravel's @csrf directive for simplicity -->
                <h1>Edit your post</h1>
                <div class="form-group">
                    <label for="title">Title</label>
                    @{{ postData.title }}
                    <input type="text" name="title" id="title" class="form-control" v-model="postData.title">
                </div>
                <div class="form-group">
                    <label for="post">Post</label>
                    <textarea name="post" rows="8" cols="80" id="post" class="form-control" v-model="postData.post"></textarea>
                </div>
                <input type="submit" name="submit" value="Submit Post" id="submit" class="btn btn-primary">
            </form>
        </div>
    </div>
</div>

(Note: I replaced your manual CSRF meta tag with Laravel's @csrf directive—it's cleaner and handles the token correctly.)

Vue.js Code

var edit = new Vue({
    el: '#postEdit',
    data: {
        postData: @json($post),
    },
    methods: {
    },
});

Controller Code

public function edit($id){
    $post = Post::findOrFail($id);
    return view('post.edit', compact('post'));
}

After making these changes, your v-model should correctly bind the post data to the input fields, and you'll be able to edit the content as expected. Check your browser's developer console for any remaining errors if things still don't work—this is usually the best place to catch Vue-related issues!

内容的提问来源于stack exchange，提问作者I Love Code