vue3前端取消收藏的不会引用collectId

Question

不会正确使用collectId到deleteCollectApi里

<template>
  <div style="
      height: 50px;
      padding-top: 13px;
      border-bottom: 1px solid #f0df81;
      position: fixed;
      width: 100%;
      z-index: 100;
      background-color: #fff;
    ">
    <div>
      <img @click="backbtn" src="../assets/back.png"
        style="width: 30px; height: 30px; position: absolute; margin-left: 20px" />
    </div>
    <div style="text-align: center">{{ shopInfo.shopName }}</div>
  </div>
  <div style="height: 50px"></div>
  <!-- 上面是顶部菜单栏 -->
  <!-- 民宿信息 -->
  <div>
    <div>联系电话：{{ shopInfo.shopPhone }}</div>
    <p v-html="shopInfo.shopDetail"></p>
    <!-- 民宿信息结束 -->
    <!-- 民宿房间型号列表 -->
    <ul>
      <li v-for="value in shopInfo.xjnMinsuList" :key="value.minsuId" @click="goto(value.minsuId)">
        <div class="box1">
          <div><img class="photo1" :src="getImg(value.minsuText)" alt=""></div>
          <div>
            <div>{{ value.minsuName }}</div>
            <div class="price1">￥: {{ value.minsuPrice }}.00</div>
          </div>

        </div>

      </li>
    </ul>
  </div>
  <!-- 收藏按钮 -->
  <div v-for="value in collectIdList" :key="value.collectId">
    <div>
      {{ value.collectId }}+1
    </div>
    <van-button :icon="[flag ? icon.name2 : icon.name1]" type="primary" @click="onCollection(shopInfo.shopId,value.collectId)" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { getShopInfoApi, insertColShopInfoApi, shopInfoApi,deleteCollectApi } from "@/api";
import { useCounterStore } from "@/stores/counter";
import { useRoute, useRouter } from "vue-router";
//返回
const backbtn = () => {
  window.history.back();
};
const store = useCounterStore();

const route = useRoute();
const router = useRouter();

const shopInfo = ref({});
const minsuInfo = ref({});
const icon = reactive({
  name1: "like-o",
  name2: "like",
});
const flag = ref(false);
//获取图片
const getImg = (img) => {
  return "http://localhost:8001" + img;
};
// 添加收藏事件
const onCollection = (e) => {
  collectionShop(store.userInfo.userId, e);
};

// 获取店铺详情信息
const getShopInfo = async (shopId) => {
  const res = await getShopInfoApi(shopId);
  shopInfo.value = res.data;
};

// 添加收藏API函数
const collectionShop = async (userId, shopId,collectId) => {
  const collectionTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
  console.log(collectionTime)
  const res = await insertColShopInfoApi(userId, shopId,collectionTime,collectId);
  console.log(res);
  if (res.code === 200) {
    flag.value = !flag.value;
    console.log("成功收藏")
  }else{
    console.log("已收藏，即将取消收藏"+collectId)
    const res = await deleteCollectApi(collectId);
    console.log(res)
  }
};
const collectIdList = ref([])
const getCollectionShop = async (userId, shopId) => {
  const res = await shopInfoApi(userId, shopId);
  console.log(...res.rows)
  //console.log(...res.rows.collectId)
  
  collectIdList.value.push(...res.rows)

  if (res.total > 0) {
    flag.value = true;
  }
  if (res.total === 0) {
    flag.value = false;
  }
};

// 跳转详情页
const goto = (e) => {
  router.push({
    name: "food",
    params: {
      foodId: e,
    },
  });
};

onMounted(() => {
 // console.log(route.params.shopId);
  getShopInfo(route.params.shopId);
  getCollectionShop(store.userInfo.userId, route.params.shopId);
});
</script>

<style scoped>
.box1 {
  display: flex;
}

.photo1 {
  width: 50px;
  height: 50px;
}
.price1{
  color: red;
}
</style>

Answer 1

以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

在VUE.JS中，删除一个收集器（COLLECT）时，你通常不会直接调用COLLECT.DELETE()方法来释放资源，因为这可能会导致内存泄漏或错误。这是因为COLLECT是一个双向绑定对象，它有一个DELETE()方法用于删除对象中的数据。如果直接调用这个方法，那么会触发DOM操作，从而可能导致内存泄漏。

要避免这个问题，你可以通过以下方式实现：

1. 在COLLECT.VUE文件中添加一个属性，表示收集器的ID。
2. 使用WATCH功能来监听DELETE()方法的变化，确保每次DELETE()都会更新COLLECT对象的ID。
3. 当需要删除收集器时，使用DELETE()方法直接修改COLLECT对象的ID。

下面是一个示例：

<TEMPLATE>
  <DIV V-FOR="ITEM IN ITEMS" :KEY="ITEM.ID">
    {{ ITEM.NAME }}
    <BUTTON @CLICK="DELETEITEM(ITEM)">DELETE</BUTTON>
  </DIV>
</TEMPLATE>

<SCRIPT>
EXPORT DEFAULT {
  DATA() {
    RETURN {
      ITEMS: [
        { ID: 1, NAME: 'ITEM 1' },
        { ID: 2, NAME: 'ITEM 2' }
      ]
    };
  },
  METHODS: {
    DELETEITEM(ITEM) {
      THIS.ITEMS = THIS.ITEMS.FILTER(X => X.ID !== ITEM.ID);
    }
  }
};
</SCRIPT>

在这个例子中，我们创建了一个包含两个物品的数组。ITEMS数组的每个元素都有一个唯一的ID，并且它们是双向绑定的。当我们在DELETEITEM方法中传递一个ID时，我们会从ITEMS数组中移除与当前ID匹配的对象。这样就不会发生内存泄漏了。

注意：这种方法可能无法满足所有场景的需求。对于特定的应用，你可能需要根据实际需求调整代码。