vue3案例

代码

<template>
  <div class="app-page">
    <div
      v-for="title in data.titleArr"
      :key="title.id"
      class="title-box"
      @click="onClick(title)"
    >
      <span>{{ title.name }}</span>
      <img v-if="title.active" class="dh-img" src="对号图片地址" />
    </div>

    <div v-if="isShow">我是标题2的弹框</div>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
let isShow = ref(false);
let data = reactive({
  titleArr: [
    { id: 1, name: "标题1" },
    { id: 2, name: "标题2" },
  ],
});

const onClick = (item) => {
  let arr = data.titleArr.map((el) => {
    Object.assign(el, { active: false });
  });
  console.log(arr);
  data.titleArr.forEach((el) => {
    if (el.name == item.name) {
      el.active = true;
    }
  });
  if (item.id == 2) {
    isShow.value = !isShow.value;
  } else if (item.id == 1) {
    isShow.value = false;
  }
};
</script>



<style scoped>
.app-page {
  text-align: center;
}
.title-box {
  border: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.title-box:first-child {
  border-bottom: none;
}
.dh-img {
  width: 20px;
  height: 20px;
}
</style>

</style>

其中遇到问题：

const data = reactive({
	arr: []
})

报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach/map/filter‘) proxy
解决方案：

const arr = reactive([])

奇妙的是： 第二天我换成了第一次写法居然没有报错，不知道为什么？