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

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

作者: 八妹sss | 来源:发表于2024-05-15 15:39 被阅读0次

    示例代码

    <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>
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/tvnvfjtx.html