【修复日常bug】（uniapp）微信小程序自定义组件无法触发（不执行）v-model双向绑定监听事件

问题概述数组数据改变后，页面上视图也重新渲染了，但是视图内的自定义组件绑定的v-model事件并没有执行；问题原因(举个例子)在经过一番排查后，发现外层有v-if事件调用了handler函数进行判断导致的<view v-for="(item,index) of list" :key="index">&

程序员小鸿

3580人浏览 · 2021-08-16 11:00:27

程序员小鸿 · 2021-08-16 11:00:27 发布

问题概述

数组数据改变后，页面上视图也重新渲染了，但是视图内的自定义组件绑定的v-model事件并没有执行；

问题原因(举个例子)

在经过一番排查后，发现外层有v-if指令调用了handler函数进行判断导致的

<!-- 循环数组 -->
<view v-for="(item,index) of list" :key="index">
    <!-- v-if调用了函数 -->
    <view v-if="handler(item)">
        <!-- 省略更多标签.... -->

        <!-- count值已经改变，自定义组件的v-model不执行 -->
        <count-component v-model="item.count"></count-component>
    </view>
</view>

handler(item){
    if(item.status == 1){
        return true
    }else if(item.type == 2 || item.type == 3){
        return true
    }else{
        return false
    }
}

解决方案

handler函数的条件判断用三元运算直接在页面上处理

<!-- 循环数组 -->
<view v-for="(item,index) of list" :key="index">
    <!-- 函数内的判断用三元运算在视图层处理 -->
    <view v-if="item.status == 1 ? true : (item.type == 2 || item.type == 3) ? true : false">
        <!-- 省略更多标签.... -->

        <count-component v-model="item.count"></count-component>
    </view>
</view>