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

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

{{1}}

Answer 2

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

Vue将递归地将其属性转换为getter / setter以使其“被动”。 对象必须是纯粹的：忽略浏览器API对象和原型属性等本机对象。根据经验，数据应该只是数据 - 不建议用自己的状态行为来观察对象。

对于您的示例，我使用计算属性返回body的{{1}}属性。

我的意思是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＆＃34;编译＆＃34;数据对象使用Object.defineProperty方法来观察数据的变化。在引擎盖下吸气剂工作正常，相信我;）

Vue v-model绑定问题

3 个答案: