فهرست منبع

Use computed property to create length 4 array regardless of original array size

sbkwgh 8 سال پیش
والد
کامیت
f3cbdd91d6
1فایلهای تغییر یافته به همراه19 افزوده شده و 5 حذف شده
  1. 19 5
      src/components/widgets/TopPosts.vue

+ 19 - 5
src/components/widgets/TopPosts.vue

@@ -9,10 +9,10 @@
 			:class='"widgets__top_posts__item--" + $index'
 			v-for='(thread, $index) in data'
 		>
-			<div class='widgets__top_posts__item__number'>{{$index + 1}}</div>
+			<div class='widgets__top_posts__item__number' v-if='thread.title'>{{$index + 1}}</div>
 			<div class='widgets__top_posts__item__info'>
 				<div class='widgets__top_posts__item__title'>{{thread.title}}</div>
-				<div class='widgets__top_posts__item__views'>
+				<div class='widgets__top_posts__item__views' v-if='thread.title'>
 					{{thread.views}} {{thread.views | pluralize('page view')}}
 				</div>
 			</div>
@@ -30,13 +30,27 @@
 			return {
 				loading: false,
 
-				data: [
+				data_: [
 					{ title: 'Post title here', views: 20 },
 					{ title: 'Another', views: 18 },
-					{ title: 'Lorem ipsum dolor sit amet loremp', views: 10 },
-					{ title: 'Post here', views: 2 }
+					{ title: 'Lorem ipsum dolor sit amet loremp', views: 10 }
 				]
 			}
+		},
+		computed: {
+			data () {
+				let ret = []
+
+				for(let i = 0; i < 4; i++) {
+					if(this.data_[i]) {
+						ret.push(this.data_[i])
+					} else {
+						ret.push({})
+					}
+				}
+
+				return ret
+			}
 		}
 	}
 </script>