Vue v-model 绑定问题

Question

Hi I have been on this issue for several days now. I am trying to bind data to input text using v-model of Vue. My Vue is installed in my project, and the cdn link added in header. The textbox simply shows the data for a split second on reload and then disappears. Is it maybe an installation problem? I installed npm vue directly in my Laravel project on my console.

My HTML:

<div id='postEdit'>

  <input type="text" name="title" id="title" class="form-control" v-model="post.body">

</div>

My Vue:

var edit = new Vue({
  el: '#postEdit',
  data: {
    post: {
      body: 'this is body'
    }
  },

});

My output when I run edit.post in console:

Object { body: Getter & Setter, … }

Answer 1

Your data property is wrong, it needs to be a function returning an object. Change like this:

data () {
  return {
    post: {
      body: 'this is body'
    }
  }
}

Answer 2

Vue.js documentation says that in data option you MUST use Plain objects :

Vue will recursively convert its properties into getter/setters to make it “reactive”. The object must be plain : native objects such as browser API objects and prototype properties are ignored. A rule of thumb is that data should just be data - it is not recommended to observe objects with their own stateful behavior.

For your example I'd go with a computed property returning the body property of your post .

I mean something like this JSFiddle .

Answer 3

Just make your data a function and check again. proof

<div id='postEdit'>
  <input type="text" name="title" id="title" class="form-control" v-model="post.body">
</div>

var edit = new Vue({
el: '#postEdit',
data: function() { 
  return {
      post: {
      body: 'this is bodygfdgfd'
      }
   }
 }
});

oh, and this console thing... try edit.post.body

You see {getter, setter} because Vue "compiles" data object using Object.defineProperty method to observe changes in data. Under the hood getters works just fine, trust me ;)