computed对input的v-model监听无效 2021-07-19 代码 阅读次数：

在写某个项目遇到的表单提交验证时，打算偷懒一次性验证几个字段，结果遇到，v-model绑定input，data未及时更新的小坑

源代码：

<input v-model="info.expressName"/>
<input v-model="info.expressNo"/>

<script>
export default {
    data() {
        info: {
            expressName: '',
            expressNo: ''
        }
    },
    methods: {

    }
    computed: {
        isCanSub: function() {
            return this.info.expressName || this.info.expressNo
        }
    }
}
</script>

测试发现，computed并没有监听到任意一个input的v-model值的变化
怎么写怎么不通过，网上搜索一番，有的说在computed里$set()重新渲染，有的说用watch，有的说用value不用model，基本都没用，不方便的不方便，不好使的不好使。思来想去，既然没更新，那我直接vue.$set() 强制更新一波不就完了。
测试通过完美解决问题

<input :value="info.expressName" @input="checkValue($event, 'expressName')"/>
<input :value="info.expressNo" @input="checkValue($event, 'expressNo')"/>

<script>
export default {
    data() {
        info: {
            expressName: '',
            expressNo: ''
        }
    },
    methods: {
        checkValue(e, type){
            let val = e.detail.value
            this.$set(this.info, type, val)
            return val
        }
    }
    computed: {
        isCanSub: function() {
            return this.info.expressName || this.info.expressNo
        }
    }
}
</script>