嗨,我已经在这个问题上好几天了。我正在尝试使用 Vue 的 v 模型将数据绑定到输入文本。我的 Vue 安装在我的项目中,并在标头中添加了cdn
链接。文本框只是在重新加载时显示一瞬间的数据,然后消失。可能是安装问题吗?我直接在我的控制台上的Laravel项目中安装了npm vue。
我的网页:
<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, … }
你的数据属性是错误的,它需要是一个返回对象的函数。像这样更改:
data () {
return {
post: {
body: 'this is body'
}
}
}
只需将数据设置为函数并再次检查即可。 证明
<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'
}
}
}
});
哦,还有这个控制台的东西...尝试编辑.帖子.正文
你看到 {getter, setter} 是因为 Vue 使用 Object.defineProperty 方法"编译"数据对象来观察数据的变化。引擎盖下的获取器工作得很好,相信我;)
Vue.js文档说data
选项中你必须使用普通对象:
Vue 会递归地将其属性转换为 getter/setter,使其"反应式"。对象必须是纯文本:浏览器 API 对象和原型属性等本机对象将被忽略。经验法则是数据应该只是数据 - 不建议观察具有自己的有状态行为的对象。
对于您的示例,我将使用一个计算属性,返回post
的 body
属性。
我的意思是像这样的JSFiddle。