Version

3.2.33

Reproduction link

github.com

Steps to reproduce

环境vite2+vue3.2.33

问题图片

代码

<template>
<section>
  <Header></Header>
  {{num}}
  {{date.list}}
  <van-swipe class="my-swipe" :autoplay="0" indicator-color="white">
    <van-swipe-item v-for="(item,index) in date.list" :key="index">
      <span class="date">
        {{item[0]}} {{item[1]}}
      </span>
      <div class="swiper-info">
        <div><img src="@/assets/icon/香薰/电话_填充@3x.png" alt=""><span v-if="item[3]">{{item[3].phone}}</span></div>
        <div><img src="@/assets/icon/香薰/邮件@3x.png" alt="" class="email"><span v-if="item.length===4">{{item[3].email}}</span></div>
        <div><img src="@/assets/icon/香薰/联系人 (15)@3x.png" alt=""><span v-if="item.length===4">{{item[3].in_person}}</span></div>
        <div><img src="@/assets/icon/香薰/消息-消息@3x.png" alt=""><span v-if="item.length===4">{{item[3].text}}</span></div>
      </div>
    </van-swipe-item>
  </van-swipe>
</section>
</template>

<script setup>

import i18n from "@/assets/js/lang";


let {ctx:that} = getCurrentInstance()

let monthList = ref([1,2,3,4,5,6,7,8,9,10,11,12])
let data = ref({
  phone: ''
})
const date = reactive({list: []})
let num = ref(0)
const newDate = reactive({list: []});

function addNote(type) {
  Router.push({path: '/addNote', query: {type: type}})
}
onMounted(() => {
  todayApi().then(res => {
    if (res.status === 200) {
      data.value = res.data.data
      dateApi().then(res => {
        date.list = res.data.data.map((item) => {//國際化月份處理
          item =  item.split('-')
          if(item[1][0] === '0') {
            item.push(item[1][1])
            item[1] = item[1][1]
            item[1] = i18n.global.t(`daily_task.addNode.${item[1]}`)
            yearMonthApi({year: item[0], month: item[2]}).then(res => {
              if(res.status === 200) {
                item[3] = {}
                item[3]['phone'] = 0
                item[3]['email'] = 0
                item[3]['in_person'] = 0
                item[3]['text'] = 0
                res.data.data.map(item1 => {
                  if(item1.type === 1) {
                    item[3]['phone'] ++
                  }else if(item1.type === 2) {
                    item[3]['email'] ++
                  }else if(item1.type === 3) {
                    item[3]['in_person'] ++
                  }else if(item1.type === 4) {
                    item[3]['text'] ++
                  }
                })
                num.value = 2

              }
            })
          }else {
            item.push(item[1])
            item[1] = i18n.global.t(`daily_task.addNode.${item[1]}`)
            yearMonthApi({year: item[0], month: item[2]}).then(res => {
              if(res.status === 200) {
                item[3] = {}
                item[3]['phone'] = 0
                item[3]['email'] = 0
                item[3]['in_person'] = 0
                item[3]['text'] = 0
                res.data.data.map(item1 => {
                  if(item1.type === 1) {
                    item[3]['phone'] ++
                  }else if(item1.type === 2) {
                    item[3]['email'] ++
                  }else if(item1.type === 3) {
                    item[3]['in_person'] ++
                  }else if(item1.type === 4) {
                    item[3]['text'] ++
                  }
                })
              }
            })
          }
          return item
        })
        console.log(date)
        that.$forceUpdate()
      })
    }
  })
})

</script>

What is expected?

如何解决

What is actually happening?

响应式失效

请看这个例子，响应未失效。

例子

请打开控制台，查看DOM结构

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.

通过vite cli构建，github.com 仓库链接

@liulinboyi

Your reproduction is not minimal, please read and follow https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro when reporting a bug. Most bugs should be reproducible with the SFC Playground.

无法通过此方式，上面附上了仓库链接

Your reproduction is far beyond minimal. We require minimal reproduction for big reports for a reason. Please do read the link @posva provided.

Your reproduction is far beyond minimal. We require minimal reproduction for big reports for a reason. Please do read the link @posva provided. 我已阅读过链接，无法通过SFC Playground复现问题，只能使用脚手架的方式。

Your reproduction is far beyond minimal. We require minimal reproduction for big reports for a reason. Please do read the link @posva provided.

拉取仓库并不麻烦

我最后再答复你一下，最小化复现中请仅保留所反馈问题直接相关的代码，不要包含第三方依赖（你给的复现中有大量无关代码和第三方依赖，这都会浪费定位问题的时间）。

我最后再答复你一下，最小化复现中请仅保留所反馈问题直接相关的代码，不要包含第三方依赖（你给的复现中有大量无关代码和第三方依赖，这都会浪费定位问题的时间）。

無法最小化復現和包含第三方依賴，是不是就不能定位和處理，我重新復現問題加裝所有依賴也不會超過五分鐘。

如果能最小化复现中请仅保留所反馈问题直接相关的代码，我何必要如此大费周折，把仓库都搬了上来。

如果能最小化复现中请仅保留所反馈问题直接相关的代码，我何必要如此大费周折，把仓库都搬了上来。

要最小化复现是为了确保不是第三方库导致的bug，越简单的demo越利于定位问题。另外，我们没有责任帮你从复杂的项目中定位bug。

求人不如求己，已找到解决办法，后来人可以参考下，附图