comment 滚动加载

src/components/card/comment-card.vue

@@ -17,11 +17,11 @@
         <Comment
           v-model="videoComments"
           :user="currentUser"
+          :props="props"
           :before-submit="submit"
           :before-like="like"
           :before-delete="deleteComment"
           :upload-img="uploadImg"
-          :props="props"
         />
       </div>
     </v-row>

src/components/comment/index.vue

@@ -89,13 +89,15 @@ export default {
   name: 'JuejinComment',
   components: { CommentList, CommentItem, CommentForm },
   inheritAttrs: false,
+  // 接收父组件通过 v-model 绑定的值
   model: {
-    prop: 'data',
+    prop: 'videoComments',
     event: 'input'
   },
   props: {
     /* 数据 */
-    data: {
+    // model 中的 videoComments prop
+    videoComments: {
       type: Array,
       default: () => [],
       required: true
@@ -148,6 +150,15 @@ export default {
       return entries.length > 0 ? entries : null
     }
   },
+  watch: {
+    videoComments: {
+      immediate: true,
+      handler(value) {
+        // 数据发生变化时加载新数据
+        this.processVideoComments()
+      }
+    }
+  },
   created() {
     // 监听并执行一次
     const cancel = this.$watch('data', () => {
@@ -162,7 +173,9 @@ export default {
     processData() {
       this.cacheData = this.data.map(this.comparePropsAndValues)
     },
-
+    processVideoComments() {
+      this.cacheData = this.videoComments.map(this.comparePropsAndValues)
+    },
     /** 对比和检查每条评论对象字段值 */
     comparePropsAndValues(comment) {
       // 初始对象