javascript - Laravel Vue.js 不会绑定(bind)到输入文本

Question

我正在使用 Laravel，想要创建一个简单的编辑应用程序来编辑帖子。我正在使用 Vue.js 2 绑定(bind)数据，但不知何故它不会显示它 - 我不确定可能出了什么问题。当我使用 Vue 的例如 @{{ postData.title }} 显示数据时，它会在页面上显示标题。但我想显示输入中的数据以便可以对其进行编辑。路由和一切都很好，因为我获得了正确的 URL，并且可以在 Vue 中显示数据，而不是在文本框中显示数据。提前致谢。

这是我的 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: {

  },
});

我的 Controller :

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

Answer 1

你不应该像这样在 JavaScript 中使用 PHP。使用客户端 http 客户端通过应用程序调用请求帖子。

Y̶o̶u̶ ̶c̶a̶n̶'̶t̶ ̶u̶s̶e̶ ̶p̶h̶p̶ ̶i̶n̶ ̶y̶o̶u̶r̶ ̶J̶a̶v̶a̶S̶c̶r̶i̶p̶t̶ ̶l̶i̶k ̶e̶ ̶t̶h̶a̶t̶.̶ ̶Y̶o̶u̶ ̶n̶e̶e̶d̶ ̶t̶o̶ ̶m̶a̶k̶e̶ ̶a̶n̶ ̶a̶p̶i̶ ̶t̶o̶ ̶g̶e̶t̶ ̶t̶h ̶e̶ ̶p̶o̶s̶t̶ ̶f̶i̶r̶s̶t̶,̶t̶h̶e̶n̶ ̶a̶s̶s̶i̶g̶n̶ ̶t̶h̶e̶ ̶d̶a̶t̶a̶ ̶w̶h̶e̶n̶ ̶a ̶s̶u̶c̶c̶e̶s̶s̶f̶u̶l̶̶r̶e̶s̶p̶o̶n̶s̶e̶̶i̶s̶̶r̶e̶c̶e̶i̶v̶e̶d̶.̶̶

编辑:

您在 postData 上没有 post 属性。你有 echo 的对象。使用 ->attributesToArray() 并以这种方式访问​​模型属性。