Question

我正在使用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, … }

我不知道如何解决此问题以获取正确的数据。我之前使用过这种方法，它始终有效。我从未有过吸气剂和吸气剂setter在我的数据中显示，所以我不确定如何处理这个问题。是我的模型，我的数据库，Vue.js或PHP中的问题？

Answer 1

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

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

Answer 2

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

Laravel / Vue不会绑定数据

2 个答案: