Laravel/Vue 不会绑定数据答案

【问题标题】：Laravel/Vue will not bind to dataLaravel/Vue 不会绑定数据
【发布时间】：2018-01-21 10:41:51
【问题描述】：

我正在使用 Laravel 并想创建一个简单的编辑应用程序来编辑帖子。我正在使用 Vue.js 2 绑定数据，但不知何故它不会显示它 - 我不确定可能出了什么问题。

当我使用 Vue.js 的例如 @{{ postData.title }} 显示数据时，它会在页面上显示标题。但我想在输入中显示数据，以便对其进行编辑。

路由和一切都很好，因为我得到了正确的 URL，而且我可以在 Vue.js 中显示数据，而不是在文本框中。提前致谢。

这是我的 HTML：

<div id="postEdit">
  <div class="container">
    <div class="row">
      <form class="form-horizontal" method="POST">
        <meta id="_token" content="{{ csrf_token() }}">
        <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>

这里是 Vue.js：

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

  methods: {

  },
});

我的控制器：

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

我的模特：

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\EloquentSoftDeletes;

class Post extends Model
{
    protected $fillable = ['title', 'post', 'user_id'];
    protected $table = "posts";
    public $timestamps = true;

    public function user()
    {
      return $this->belongsTo('App\User');
    }
}

我在控制台中运行edit.postData 时的输出：

Object { id: Getter & Setter, title: Getter & Setter, post: Getter & Setter, user_id: Getter & Setter, created_at: Getter & Setter, updated_at: Getter & Setter, deleted_at: Getter & Setter, … }

我不确定如何解决此问题以获得正确的数据。我以前用过这种方法，它总是有效的。我从来没有在我的数据中显示过 getter & setter，所以我不确定如何处理这个问题。是我的模型、我的数据库、Vue.js 还是 PHP 的问题？

【问题讨论】：

您的 javascript 文件是否由 PHP 解释？这看起来很可疑：postData: <?php echo $post ?>。你确定这种 php/javascript 的组合正确吗？
嗨，是的，这就是我们公司的做法，我们已经使用过很多次了。我自己已经在其他项目中使用过它并且它有效。通常我会得到数据，但这是数据第一次显示为“Getter & Setter”，我不确定这是如何发生的或为什么会发生。我仍在培训和学习中。
"Getter & Setter" 表示如果您尝试获取postData.id，则会调用一个函数（getter）来返回一个计算值。无需担心 - 只需在控制台中输入 edit.postData.id 即可查看结果。这是postData.getId() 的简写。

标签： javascript php laravel vue.js

【解决方案1】：

在您回显时尝试将帖子转换为数组。

postData: <?php echo $post->toArray(); ?>,

【讨论】：

【解决方案2】：

尝试postData: {!! json_encode($post) !!},获取编码数据。

【讨论】：

或者在 Laravel 5.4+ 中使用 @json 指令