Vue v-model 绑定问题

Question

您好，我已经讨论这个问题好几天了。我正在尝试使用 Vue 的 v-model 将数据绑定到输入文本。我的 Vue 安装在我的项目中，并在标题中添加了 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 选项中您必须使用普通对象：

Vue 将递归地将其属性转换为 getter/setter 以使其“反应”。 对象必须是普通对象：忽略浏览器 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 方法“编译”数据对象来观察数据的变化。引擎盖下的吸气剂工作得很好，相信我；）