feat:v-for添加:key

src/views/discussdetail/DiscussDetail.vue

@@ -2,7 +2,7 @@
   <div class="surveydetailpage">
     <!-- 面包屑导航 -->
     <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>
@@ -49,20 +49,42 @@
       </div>
       <div class="discusscontent clearfix">
         <div class="contenttop clearfix">
-
-
           <div class="contenttitle">{{ disDetail.discussName }}</div>
-          <div @click="like()"
-               style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px">
-            <span class="iconfont icon-dianzan"
-                  :style="{color:disDetail.praised?'red':'#b3bdc4',marginLeft: '19px'}"></span>
-            <div class="count"> {{ disDetail.praiseNum || 0 }}</div>
+          <div
+            @click="like()"
+            style="
+              display: flex;
+              cursor: pointer;
+              align-items: baseline;
+              margin-left: 20px;
+            "
+          >
+            <span
+              class="iconfont icon-dianzan"
+              :style="{
+                color: disDetail.praised ? 'red' : '#b3bdc4',
+                marginLeft: '19px',
+              }"
+            ></span>
+            <div class="count">{{ disDetail.praiseNum || 0 }}</div>
           </div>
-          <div @click="collection()"
-               style="display: flex;cursor: pointer;align-items: baseline;margin-left: 20px">
-            <span class="iconfont icon-shoucang"
-                  :style="{color: disDetail.collected?'red':'#b3bdc4',marginLeft: '19px'}"></span>
-            <div class="count"> {{ disDetail.collectionNum || 0 }}</div>
+          <div
+            @click="collection()"
+            style="
+              display: flex;
+              cursor: pointer;
+              align-items: baseline;
+              margin-left: 20px;
+            "
+          >
+            <span
+              class="iconfont icon-shoucang"
+              :style="{
+                color: disDetail.collected ? 'red' : '#b3bdc4',
+                marginLeft: '19px',
+              }"
+            ></span>
+            <div class="count">{{ disDetail.collectionNum || 0 }}</div>
           </div>
         </div>
         <div class="contentmid">
@@ -74,18 +96,28 @@
     <div class="bascinfor">
       <div class="inputone">
         <el-input
-            v-model="disComment.content"
-            :autosize="{ minRows: 5, maxRows: 5 }"
-            resize="none"
-            maxlength="100"
-            type="textarea"
-            placeholder="写评论~"
+          v-model="disComment.content"
+          :autosize="{ minRows: 5, maxRows: 5 }"
+          resize="none"
+          maxlength="100"
+          type="textarea"
+          placeholder="写评论~"
         />
         <div class="words">{{ disComment.content.length }}/100</div>
         <div class="upload">
           <div style="display: flex">
-            <div class="allimg" v-for="(img,i) in commentSubmitFileList">
-              <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
+            <div
+              class="allimg"
+              v-for="(img, i) in commentSubmitFileList"
+              :key="i"
+            >
+              <div
+                class="imgone"
+                :style="{
+                  backgroundImage: `url('${img.url}')`,
+                  marginLeft: '15px',
+                }"
+              ></div>
               <div class="cha" @click="removeCommentImg(i)"></div>
             </div>
           </div>
@@ -93,7 +125,7 @@
             <div class="btnone clearfix">
               <UploadImg v-model="commentSubmitFileList">
                 <button class="btwwo">
-                  <img class="image" src="../../assets/image/uploadimg.png"/>
+                  <img class="image" src="../../assets/image/uploadimg.png" />
                   <div class="shangchuan">上传图片</div>
                 </button>
               </UploadImg>
@@ -105,7 +137,7 @@
 
         <div class="thinline"></div>
         <div class="bottom">
-          <div v-for="(row,i) in commontList">
+          <div v-for="(row, i) in commontList" :key="i">
             <div class="header">
               <div class="avator"></div>
               <div class="id">{{ row.userName }}</div>
@@ -120,19 +152,33 @@
               </div>
               <div class="intime">{{ row.ctime }}</div>
               <div class="likeYou">
-                <div @click="commentComment(row)" style="display: flex;cursor: pointer;align-items: baseline;">
-                  <span class="iconfont icon-pinglun"
-                        :style="{color:'#b3bdc4'}"></span>
+                <div
+                  @click="commentComment(row)"
+                  style="display: flex; cursor: pointer; align-items: baseline"
+                >
+                  <span
+                    class="iconfont icon-pinglun"
+                    :style="{ color: '#b3bdc4' }"
+                  ></span>
                   <!--                  <div class="count"> {{ row.praiseNum || 0 }}</div>-->
                 </div>
-                <div @click="commentLike(row)"
-                     style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px">
-                  <span class="iconfont icon-dianzan"
-                        :style="{color:row.praised?'red':'#b3bdc4'}"></span>
-                  <div class="count"> {{ row.praiseNum || 0 }}</div>
+                <div
+                  @click="commentLike(row)"
+                  style="
+                    display: flex;
+                    cursor: pointer;
+                    align-items: baseline;
+                    margin-left: 19px;
+                  "
+                >
+                  <span
+                    class="iconfont icon-dianzan"
+                    :style="{ color: row.praised ? 'red' : '#b3bdc4' }"
+                  ></span>
+                  <div class="count">{{ row.praiseNum || 0 }}</div>
                 </div>
               </div>
-              <div v-for="(replay,j) in row.children">
+              <div v-for="(replay, j) in row.children" :key="j">
                 <div class="reply">
                   <div class="sameava avaone"></div>
                   <div class="sameuser">{{ replay.userName }}</div>
@@ -151,46 +197,79 @@
                   <!-- <div class="talk"></div> -->
                 </div>
                 <div class="likeYou">
-                  <div @click="commentComment(replay)" style="display: flex;cursor: pointer;align-items: baseline;">
-                    <span class="iconfont icon-pinglun" :style="{color:'#b3bdc4'}"></span>
-<!--                    <div class="count"> {{ replay.commentNum }}</div>-->
+                  <div
+                    @click="commentComment(replay)"
+                    style="
+                      display: flex;
+                      cursor: pointer;
+                      align-items: baseline;
+                    "
+                  >
+                    <span
+                      class="iconfont icon-pinglun"
+                      :style="{ color: '#b3bdc4' }"
+                    ></span>
+                    <!--                    <div class="count"> {{ replay.commentNum }}</div>-->
                   </div>
-                  <div @click="commentLike(replay)"
-                       style="display: flex;cursor: pointer;align-items: baseline;margin-left: 19px">
-                  <span class="iconfont icon-dianzan"
-                        :style="{color:replay.praised?'red':'#b3bdc4'}"></span>
-                    <div class="count"> {{ replay.praiseNum || 0 }}</div>
+                  <div
+                    @click="commentLike(replay)"
+                    style="
+                      display: flex;
+                      cursor: pointer;
+                      align-items: baseline;
+                      margin-left: 19px;
+                    "
+                  >
+                    <span
+                      class="iconfont icon-dianzan"
+                      :style="{ color: replay.praised ? 'red' : '#b3bdc4' }"
+                    ></span>
+                    <div class="count">{{ replay.praiseNum || 0 }}</div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="discuss clearfix" v-if="commontList && commontList.length">
+          <div
+            class="discuss clearfix"
+            v-if="commontList && commontList.length"
+          >
             <div class="inreply">
               <el-input
-                  v-model="replayComment.content"
-                  :autosize="{ minRows: 5, maxRows: 5 }"
-                  resize="none"
-                  maxlength="100"
-                  type="textarea"
-                  :placeholder="replayComment.placeholder"
+                v-model="replayComment.content"
+                :autosize="{ minRows: 5, maxRows: 5 }"
+                resize="none"
+                maxlength="100"
+                type="textarea"
+                :placeholder="replayComment.placeholder"
               />
               <div class="words">{{ replayComment.content.length }}/100</div>
               <div class="upload">
                 <div style="display: flex">
-                  <div class="allimg" v-for="(img,i) in fileList">
-                    <div class="imgone" :style="{backgroundImage: `url('${img.url}')`,marginLeft:'15px'}"></div>
+                  <div class="allimg" v-for="(img, i) in fileList" :key="i">
+                    <div
+                      class="imgone"
+                      :style="{
+                        backgroundImage: `url('${img.url}')`,
+                        marginLeft: '15px',
+                      }"
+                    ></div>
                     <div class="cha" @click="removeImg(i)"></div>
                   </div>
                 </div>
                 <datagrid class="uploadAnd">
                   <UploadImg v-model="fileList">
                     <button class="btnone clearfix">
-                      <img class="image" src="../../assets/image/uploadimg.png"/>
+                      <img
+                        class="image"
+                        src="../../assets/image/uploadimg.png"
+                      />
                       <div class="shangchuan">上传图片</div>
                     </button>
                   </UploadImg>
-                  <button class="btntwo" @click="submitReplayComment">发表</button>
+                  <button class="btntwo" @click="submitReplayComment">
+                    发表
+                  </button>
                 </datagrid>
               </div>
             </div>
@@ -202,73 +281,85 @@
   </div>
 </template>
 <script setup>
-import {reactive, ref, toRefs} from "vue";
-import {useRoute} from "vue-router/dist/vue-router";
-import {request, usePage, useRequest} from "@/api/request";
+import { reactive, ref, toRefs } from "vue";
+import { useRoute } from "vue-router/dist/vue-router";
+import { request, usePage, useRequest } from "@/api/request";
 import {
   COMMENT_ADD,
   COMMENT_COLLECTION,
-  COMMENT_LIST, COMMENT_PRAISE,
+  COMMENT_LIST,
+  COMMENT_PRAISE,
   DISCUSS_DETAIL,
-  FILE_UPLOAD
+  FILE_UPLOAD,
 } from "@/api/api";
-import UploadImg from '@/components/img/UploadImg.vue'
+import UploadImg from "@/components/img/UploadImg.vue";
 
-const {query: {id, discussSubmitId,type}} = useRoute()
+const {
+  query: { id, discussSubmitId, type },
+} = useRoute();
 
-const {data: commontList, fetchData: commonFetch} = usePage(COMMENT_LIST, {id, type: 1})
+const { data: commontList, fetchData: commonFetch } = usePage(COMMENT_LIST, {
+  id,
+  type: 1,
+});
 
-const {data: disDetail} = useRequest(DISCUSS_DETAIL, {id,type})
+const { data: disDetail } = useRequest(DISCUSS_DETAIL, { id, type });
 
-const fileList = ref([])
-const commentSubmitFileList = ref([])
+const fileList = ref([]);
+const commentSubmitFileList = ref([]);
 
 const disComment = ref({
-  content: '',
-})
+  content: "",
+});
 const replayComment = ref({
-  placeholder: '',
-  content: '',
-  pid: ''
-})
+  placeholder: "",
+  content: "",
+  pid: "",
+});
 
 function removeImg(i) {
-  fileList.value.splice(i, 1)
+  fileList.value.splice(i, 1);
 }
 
 function removeCommentImg() {
-  commentSubmitFileList.value.splice(i, 1)
+  commentSubmitFileList.value.splice(i, 1);
 }
 
 function like() {
-  disDetail.value.praised ? (disDetail.value.praiseNum -= 1) : (disDetail.value.praiseNum += 1)
-  disDetail.value.praised = !disDetail.value.praised
-  request(COMMENT_PRAISE, {targetId: disDetail.value.discussId, type: 5})
+  disDetail.value.praised
+    ? (disDetail.value.praiseNum -= 1)
+    : (disDetail.value.praiseNum += 1);
+  disDetail.value.praised = !disDetail.value.praised;
+  request(COMMENT_PRAISE, { targetId: disDetail.value.discussId, type: 5 });
 }
 
 function collection() {
-  disDetail.value.collected ? (disDetail.value.collectionNum -= 1) : (disDetail.value.collectionNum += 1)
-  disDetail.value.collected = !disDetail.value.collected
-  request(COMMENT_COLLECTION, {targetId: disDetail.value.discussId, type: 6})
+  disDetail.value.collected
+    ? (disDetail.value.collectionNum -= 1)
+    : (disDetail.value.collectionNum += 1);
+  disDetail.value.collected = !disDetail.value.collected;
+  request(COMMENT_COLLECTION, { targetId: disDetail.value.discussId, type: 6 });
 }
 
 function commentLike(obj) {
-  obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1)
-  obj.praised = !obj.praised
-  request(COMMENT_PRAISE, {targetId: obj.id, type: 5})
+  obj.praised ? (obj.praiseNum -= 1) : (obj.praiseNum += 1);
+  obj.praised = !obj.praised;
+  request(COMMENT_PRAISE, { targetId: obj.id, type: 5 });
 }
 
 function commentComment(obj) {
-  replayComment.value.placeholder = '@ ' + obj.userName
-  replayComment.value.pid = obj.id
+  replayComment.value.placeholder = "@ " + obj.userName;
+  replayComment.value.pid = obj.id;
 }
 
 function submitComment() {
-  request(COMMENT_ADD, {targetId: disDetail.value.discussId, content: disComment.value.content, type: 1}).then(() => {
-    commonFetch()
-  })
-
-
+  request(COMMENT_ADD, {
+    targetId: disDetail.value.discussId,
+    content: disComment.value.content,
+    type: 1,
+  }).then(() => {
+    commonFetch();
+  });
 }
 
 function submitReplayComment() {
@@ -276,10 +367,10 @@ function submitReplayComment() {
     targetId: disDetail.value.discussId,
     content: replayComment.value.content,
     type: 2,
-    pid: replayComment.value.pid
+    pid: replayComment.value.pid,
   }).then(() => {
-    commonFetch()
-  })
+    commonFetch();
+  });
 }
 </script>
 
@@ -529,7 +620,7 @@ function submitReplayComment() {
         .uploadAnd {
           margin-top: 21px;
 
-          .btwwo{
+          .btwwo {
             cursor: pointer;
 
             .image {