MPVUE 开发微信小程序 textarea v-model 绑定不了数据

1.原html代码

     <textarea v-model="comment" class="textarea"
            :maxlength="100"
            placeholder="请输入评论内容">
    textarea>

2.js代码

    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)
            }
    }

这样控制台打印出来的结果
MPVUE 开发微信小程序 textarea v-model 绑定不了数据_第1张图片
控制台打印出来的结果只有 comment 为空的,说明 v-model 双向绑定不成功

3.更改后的html代码

       <textarea v-model.lazy="comment" class="textarea"
              :maxlength="100"
              placeholder="请输入评论内容">
       textarea>

把 v-model 改为 v-model.lazy

4.js代码不变

    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)
            }
    }

控制台打印出来的结果
MPVUE 开发微信小程序 textarea v-model 绑定不了数据_第2张图片
把 v-model 改为 v-model.lazy 就可以实现 双向绑定了。

5.另外

合理使用双向绑定 mpvue 建议使用 v-model.lazy 绑定方式以优化性能,此外 v-model 在老基础库下输入框输入时可能存在光标重设的问题。

vue文档里的解释:
.lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步

大家可以参考mpvue文档原链:http://mpvue.com/mpvue/#_17

你可能感兴趣的:(小程序)