uni-app vue3 下 picker-view 赋值value不能正确显示

uni-app vue3 下 picker-view 赋值value不能正确显示

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

操作步骤：

  • 点击按钮

预期结果：

  • picker-view 正确显示应该是 3 4

实际结果：

  • vue2下正常，vue3下只有第一列显示3，第二列没反应

bug描述：

vue2下点击按钮，设置picker-view的value可以正常显示，vue3下赋值value不能正确显示？

<template>  
    <view>  
        <button @click="changeIndexs" size="mini">now</button>  
        <picker-view class="picker-view" :value="indexs" @change="handleChange">  
            <picker-view-column>  
                <view class="item" v-for="(item, index) in 20" :key="index">{{ item }}</view>  
            </picker-view-column>  
            <picker-view-column>  
                <view class="item" v-for="(item, index) in 20" :key="index">{{ item }}</view>  
            </picker-view-column>  
        </picker-view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            indexs: []  
        };  
    },  
    methods: {  
        changeIndexs() {  
            this.indexs = [2, 3];  
            this.log(this.indexs);  
        }  
    }  
};  
</script>  

<style lang="scss">  
.picker-view {  
    width: 750rpx;  
    height: 600rpx;  
}  
.item {  
    height: 34px;  
    align-items: center;  
    justify-content: center;  
    text-align: center;  
}  
</style>

更多关于uni-app vue3 下 picker-view 赋值value不能正确显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

顶一下

更多关于uni-app vue3 下 picker-view 赋值value不能正确显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题已记录，后续优化，已加分，感谢您的反馈！

HBuilderX 3.2.13+ 已修复

现在 vue3 又不行了

回复 2***@qq.com: H5还是App？

HBuilderX版本号： 4.29，vue3 value为[0,0]时，选择的却是[1,1]

23年了 还是不行

value赋值无效解决了吗

试试这个方法https://ask.dcloud.net.cn/question/75054

这是一个典型的Vue 3响应式系统与uni-app组件兼容性问题。

在Vue 3中，picker-view的value属性需要完整的响应式对象才能正确触发更新。你的代码中直接赋值数组，Vue 3的响应式系统可能无法正确追踪到变化。

解决方案：

  1. 使用ref或reactive（Composition API）：
<script setup>
import { ref } from 'vue'

const indexs = ref([])

const changeIndexs = () => {
  indexs.value = [2, 3]
}
</script>
  1. 使用nextTick确保DOM更新（Options API）：
<script>
export default {
  data() {
    return {
      indexs: []
    }
  },
  methods: {
    async changeIndexs() {
      this.indexs = [2, 3]
      await this.$nextTick()
      // 如果需要强制更新
      this.$forceUpdate()
    }
  }
}
</script>
  1. 使用深拷贝触发响应式更新：
<script>
export default {
  methods: {
    changeIndexs() {
      this.indexs = JSON.parse(JSON.stringify([2, 3]))
    }
  }
}
</script>
回到顶部