微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题

简介: 微信小程序:uni-app列表数据渲染子组件修改数据sync/v-model无效的问题

有如下一个列表,将数据循环传递给子组件,实现业务解耦,组件拆分

Vue的正常逻辑是,父组件和子组件的数据传递的是一个对象,属于引用传递,可以直接在子组件中修改数据,父组件中也会变化,它们操作的是同一个数据。

uni-app子组件中修改 H5正常,转为微信小程序后修改失败

解决办法是:将修改的数据以事件的方式传递给父组件,在父组件中修改数据

列表 List.vue

<template>
  <view class="dish-list">
    <Item
      v-for="item in list"
      :item="item"
      @on-change="handleChange"
    ></Item>
  </view>
</template>
<script>
import Item from './Item.vue'
export default {
  components: {
    Item,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          count: 0,
        },
      ],
    }
  },
  methods: {
    handleChange(item, count) {
      let index = this.list.findIndex((row) => row.id == item.id)
      // 直接修改顶层数据
      this.list[index].count = count
    },
  },
}
</script>

子组件 Item.vue

<template>
  <view @click="handleClick">{{item.count}}</view>
</template>
<script>
export default {
  props: {
    item: {
      type: Object,
    }
  },
  methods: {
    handleClick() {
      // bug: uni-app子组件中修改 H5正常,转为微信小程序后修改失败
      // this.item.count++
      // 修复:将数据修改事件交给父组件处理  
      let count = this.item + 1
      this.$emit('on-change', this.item, count)
    }
  },
}
</script>
<style>
</style>

总结:uni-app使用的vue语法,转为微信小程序之后,部分js语法可能会无效

相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
546 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
661 1
|
2月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
37 1
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
208 1
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
641 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
小程序 JavaScript 开发工具
|
1月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
43 3
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
363 0
|
2月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
2月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
下一篇
无影云桌面