feat:v-for添加:key

src/views/discuss/DiscussPage.vue

@@ -2,7 +2,7 @@
   <div class="surveydetail">
     <!-- 面包屑导航 -->
     <div
-        style="display: flex; align-items: center; justify-content: space-between"
+      style="display: flex; align-items: center; justify-content: space-between"
     >
       <div class="crumb">
         <div>混合制项目</div>
@@ -14,16 +14,16 @@
       <div class="prevnext">
         <div class="prev">
           <img
-              style="width: 23px; height: 23px"
-              src="../../assets/image/prev.png"
+            style="width: 23px; height: 23px"
+            src="../../assets/image/prev.png"
           />
           <div style="margin-left: 7px">上一个</div>
         </div>
         <div class="prev" style="margin-left: 31px">
           <div style="margin-right: 7px">下一个</div>
           <img
-              style="width: 23px; height: 23px"
-              src="../../assets/image/next.png"
+            style="width: 23px; height: 23px"
+            src="../../assets/image/next.png"
           />
         </div>
       </div>
@@ -39,7 +39,7 @@
         <div class="title">
           {{ info.name }}
         </div>
-<!--        <button class="btn">发表帖子</button>-->
+        <!--        <button class="btn">发表帖子</button>-->
       </div>
 
       <div>
@@ -49,29 +49,49 @@
           <div class="intime">进行中</div>
         </div>
         <div class="allbtn">
-          <button :class="`btnone ${param.searchType==1?'active':''}`" >最新</button>
-          <button :class="`btntwo ${param.searchType==2?'active':''}`"
-                  style="margin-left: 20px">最热
+          <button :class="`btnone ${param.searchType == 1 ? 'active' : ''}`">
+            最新
+          </button>
+          <button
+            :class="`btntwo ${param.searchType == 2 ? 'active' : ''}`"
+            style="margin-left: 20px"
+          >
+            最热
           </button>
         </div>
-        <div class="discusslist" v-for="(d,j) in info?.discussDtoList">
+        <div
+          class="discusslist"
+          v-for="(d, j) in info?.discussDtoList"
+          :key="j"
+        >
           <div class="itemtitle">{{ d.discussName }}</div>
           <div class="itemdiscuss">
             {{ d.discussExplain }}
           </div>
           <div class="allstar clearfix">
-            <div @click="comment(d)" style="display: flex;cursor: pointer">
-              <span class="iconfont icon-pinglun" style="color:#b3bdc4"></span>
-              <div class="count"> {{ d.commentNum || 0 }}</div>
+            <div @click="comment(d)" style="display: flex; cursor: pointer">
+              <span class="iconfont icon-pinglun" style="color: #b3bdc4"></span>
+              <div class="count">{{ d.commentNum || 0 }}</div>
             </div>
-            <div @click="like(d)" style="display: flex;cursor: pointer">
-              <span class="iconfont icon-dianzan" :style="{color:d.praised?'red':'#b3bdc4',marginLeft: '19px'}"></span>
-              <div class="count"> {{ d.praiseNum || 0 }}</div>
+            <div @click="like(d)" style="display: flex; cursor: pointer">
+              <span
+                class="iconfont icon-dianzan"
+                :style="{
+                  color: d.praised ? 'red' : '#b3bdc4',
+                  marginLeft: '19px',
+                }"
+              ></span>
+              <div class="count">{{ d.praiseNum || 0 }}</div>
             </div>
-            <div @click="collection(d)" style="display: flex;cursor: pointer">
-            <span class="iconfont icon-shoucang"
-                  :style="{color:d.collected?'red':'#b3bdc4',marginLeft: '19px'}"></span>
-              <div class="count"> {{ d.collectionNum || 0 }}</div>
+            <div @click="collection(d)" style="display: flex; cursor: pointer">
+              <span
+                class="iconfont icon-shoucang"
+                :style="{
+                  color: d.collected ? 'red' : '#b3bdc4',
+                  marginLeft: '19px',
+                }"
+              ></span>
+              <div class="count">{{ d.collectionNum || 0 }}</div>
             </div>
           </div>
           <div class="thinline"></div>
@@ -83,42 +103,40 @@
 </template>
 
 <script setup>
-import {request, useRequest} from "@/api/request";
-import {
-  COMMENT_COLLECTION,
-  COMMENT_PRAISE,
-  DISCUSS_LIST,
-} from "@/api/api";
-import {reactive, ref, toRefs} from "vue";
-import {useRoute, useRouter} from "vue-router";
+import { request, useRequest } from "@/api/request";
+import { COMMENT_COLLECTION, COMMENT_PRAISE, DISCUSS_LIST } from "@/api/api";
+import { reactive, ref, toRefs } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
-const router = useRouter()
-const {query: {id,type}} = useRoute()
+const router = useRouter();
+const {
+  query: { id, type },
+} = useRoute();
 
 const param = ref({
   type,
-  id
-})
-const {data: info} = useRequest(DISCUSS_LIST, param.value)
+  id,
+});
+const { data: info } = useRequest(DISCUSS_LIST, param.value);
 
 const state = reactive({
   activeName: "first",
 });
 
-function comment({discussId: id}) {
-  router.push({path: 'discussdetail', query: {id,type}})
+function comment({ discussId: id }) {
+  router.push({ path: "discussdetail", query: { id, type } });
 }
 
 function like(d) {
-  d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1)
-  d.praised = !d.praised
-  request(COMMENT_PRAISE, {targetId: d.discussId, type: 3})
+  d.praised ? (d.praiseNum -= 1) : (d.praiseNum += 1);
+  d.praised = !d.praised;
+  request(COMMENT_PRAISE, { targetId: d.discussId, type: 3 });
 }
 
 function collection(d) {
-  d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1)
-  d.collected = !d.collected
-  request(COMMENT_COLLECTION, {targetId: d.discussId, type: 4})
+  d.collected ? (d.collectionNum -= 1) : (d.collectionNum += 1);
+  d.collected = !d.collected;
+  request(COMMENT_COLLECTION, { targetId: d.discussId, type: 4 });
 }
 </script>