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

这篇具有很好参考价值的文章主要介绍了微信小程序：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>