Laravel Vue.js 不会绑定到输入文本答案

【问题标题】：Laravel Vue.js will not bind to input textLaravel Vue.js 不会绑定到输入文本
【发布时间】：2018-06-28 16:56:12
【问题描述】：

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

  },
});

我的控制器：

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

【问题讨论】：

当前输入框中显示的是哪个值？
没有值 - 它是空的。当我刷新页面时，值会出现一瞬间然后消失。
第一次加载页面时，能否分享一下postData里面的内容（查看源码）？

标签： javascript php laravel binding vue.js

【解决方案1】：

你不应该像那样在 JavaScript 中使用 PHP。使用客户端 http 客户端通过应用调用请求发布。

您不容使用PHP在JavaScript等̶t̶h̶a̶t̶.̶需要进行API获得那个职位第一，̶然后分配数据时的成功响应是̶r̶e̶c̶e̶i̶v̶e̶d̶.̶̶ P>

编辑：

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

【讨论】：

这没有意义，因为它在@{{ postData.title }} 中获取标题，而不是在输入框和文本区域中。标题的数据在页面上正确显示，但在输入中不显示。
您是否在每次请求之间重新加载页面？
你需要将post对象转换为数组，这样才能设置为合适的js对象。查看我的编辑。