Laravel Vue.js will not bind to input text

Question

I am using Laravel and want to create a simple edit application for editing a post. I am using Vue.js 2 to bind the data, but somehow it will not display it - and I am unsure what could be wrong. When I display the data using Vue's e.g of @{{ postData.title }} it displays the title on the page. But I want to display the data inside a input so that it can be edited. The routing and everything is fine, because I get the correct URL and I can display the data in Vue just not in the textboxes. Thanks in advance.

Here is my 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>

Here is the Vue.js:

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

  methods: {

  },
});

My controller:

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

No value - it is empty. When I refresh the page the values appear for a split second and then disappears. — I Love Code
– I Love Code, Commented Jan 19, 2018 at 12:46
When you first load the page, can you share what's inside postData (view source)? — E. S.
– E. S., Commented Jan 19, 2018 at 13:00

score 1 · Accepted Answer · 2018-01-19 12:52:53Z

1

You shouldn't use PHP in JavaScript like that. Use a client side http client to request the post via an app call.

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̶.̶ ̶

Edit:

You don't have a post property on postData. You have the echoed object. Use ->attributesToArray() and access the model attributes that way.

edited Jan 19, 2018 at 12:52

answered Jan 19, 2018 at 12:41

user320487

Sign up to request clarification or add additional context in comments.

3 Comments

I Love Code Over a year ago

That does not make sense because it picks up the title in the @{{ postData.title }} just not in the input box and textarea. The data of the title displays correctly on the page, but not in input.

user320487 Over a year ago

Are you reloading the page between every request?

user320487 Over a year ago

You need to convert the post object to an array so it can be set as a proper js object. See my edit.

Collectives™ on Stack Overflow

Laravel Vue.js will not bind to input text

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related