微信小程序: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语法可能会无效

相关文章
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
197 7
|
13天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
248 1
|
14天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
108 3
|
17天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
99 1
|
18天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
252 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
13天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
141 0
|
2月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
2月前
|
小程序 前端开发 索引
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
这篇文章介绍了微信小程序中条件渲染和列表渲染的使用方法,包括wx:if、wx:elif、wx:else、wx:for、wx:key以及block标记和hidden属性的使用。
微信小程序中的条件渲染和列表渲染,wx:if ,wx:elif,wx:else,wx:for,wx:key的使用,以及block标记和hidden属性的说明
|
17天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
210 0
|
20天前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。

热门文章

最新文章