vue3 数组项是对象,解决修改数组某一项数据视图不更新问题

示例代码

<template>
  <section class="courseDetail">
    <p v-for="item in arr" :key="item.id">{{ item.obj.text }}</p>
  </section>
</template>
<script setup>
const arr = ref([]) // 显示的数据
const arr1 = ref([]) // 接口获取的数据
let arr2 = ref([])
const updateArr = (list) => {
  if (!list.value.length) {
    arr2.value = []
  } else {
    arr2.value = list.value.map(item => {
      return {
        ...item,
        val: 1
      }
    })
  }
  
}
const timer = setTimeout(() => {
  arr1.value = [
    {id:1, name: '数据1', obj: {val:1,text:'1'}},
    {id:2, name: '数据2', obj: {val:1,text:'1'}}
  ]
  updateArr(arr1)
  arr.value = arr2.value
  clearTimeout(timer)
}, 1000)

const timer2 = setTimeout(() => {
  arr2.value[0].obj = {val:2,text:'2'}
  updateArr(arr2)
  console.log('arr2-2',arr2.value)
  console.log('arr', arr.value)
  clearTimeout(timer2)
}, 4000)
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容