Vue v-model绑定问题

Question

嗨，我已经在这个问题上讨论了几天了。我正在尝试使用Vue的v-model将数据绑定到输入文本。我的Vue安装在我的项目中，并且在header中添加了cdn链接。文本框只会在重新加载时显示瞬间的数据，然后消失。这可能是安装问题吗？我在控制台上的Laravel项目中直接安装了npm vue。

我的HTML：

<div id='postEdit'>

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

</div>

我的Vue：

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

});

我在控制台运行edit.post时的输出：

Object { body: Getter & Setter, … }

Answer 1

您的数据属性错误，它需要是返回对象的函数。如下所示：

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

Answer 2

Vue.js documentation说，在data选项中，您必须使用普通对象

getter Vue将以递归方式将其属性转换为

/getter，以使其成为“响应式”。对象必须是纯：本机对象，如浏览器API对象和原型属性被忽略。经验法则是，数据应该只是数据-不建议观察具有自己的有状态行为的对象。

对于您的示例，我将使用一个计算属性来返回post的body属性。

我的意思是像this JSFiddle这样的东西。

Answer 3

只需将您的数据作为函数并再次检查即可。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'
      }
   }
 }
});

哦还有这个控制台的东西..。试试edit.post.body

你会看到{getter，setter}，因为Vue使用Object.defineProperty方法“编译”数据对象来观察数据的变化。在幕后，getters运行得很好，相信我;)