<textarea v-model="comment" class="textarea"
:maxlength="100"
placeholder="请输入评论内容">
textarea>
export default {
data(){
return {
userinfo:{},//用户信息
bookid:'', //图书id
info:{},//图书信息
comment:'',//评论内容
location:'',//地理位置
phone:''//手机型号
}
},
methods:{
async addComment(){
//评论内容 手机型号 地理位置 图书id 用户的openid
const data = {
openid : this.userinfo.openId,
bookid : this.bookid,
comment : this.comment,
location : this.location,
phone : this.phone
}
console.log(data)
}
}
这样控制台打印出来的结果
控制台打印出来的结果只有 comment 为空的,说明 v-model 双向绑定不成功
<textarea v-model.lazy="comment" class="textarea"
:maxlength="100"
placeholder="请输入评论内容">
textarea>
把 v-model 改为 v-model.lazy
export default {
data(){
return {
userinfo:{},//用户信息
bookid:'', //图书id
info:{},//图书信息
comment:'',//评论内容
location:'',//地理位置
phone:''//手机型号
}
},
methods:{
async addComment(){
//评论内容 手机型号 地理位置 图书id 用户的openid
const data = {
openid : this.userinfo.openId,
bookid : this.bookid,
comment : this.comment,
location : this.location,
phone : this.phone
}
console.log(data)
}
}
控制台打印出来的结果
把 v-model 改为 v-model.lazy 就可以实现 双向绑定了。
合理使用双向绑定 mpvue 建议使用 v-model.lazy 绑定方式以优化性能,此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。
vue文档里的解释:
.lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步
大家可以参考mpvue文档原链:http://mpvue.com/mpvue/#_17