尝试服务端渲染失败

@@ -17,7 +17,29 @@ const getBrandData = params => {
             brandLogo: '',
             brandLogo: '',
             brandName: ' A.Dorad',
             brandName: ' A.Dorad',
             brandIntro: 'Dora毕业于中国美术学院的珠宝设计专业。毕业之后，Dora便开始游走于各国，吸收各地首饰设计的精髓，之后又在首尔修学了3年，A.Dorad饰品系列诞生于首尔， 设计师Dora将首尔设为起点并逐步推向国际。2013年，A.Dorad将旗下主力设计师带领进军广州，并以此为基地，以国际化的标准，设计出全新概念饰品。A.Dorad给人们提供高品质的服务，并且拥有独有的工艺。多样的珠宝首饰产品造型更衬托出其前卫、高雅的设计理念。珍贵的矿石搭配流行的创意理念，启迪了人类艺术。A.Dorad饰品符合现代年轻人对珠宝的追求与热爱，充满个性与时尚.它可以满足不同人的需求独家定制专属于自己的水晶饰品。A.Dorad将继续发挥无与伦比的创造力并开启通往浪漫梦幻的大门。',
             brandIntro: 'Dora毕业于中国美术学院的珠宝设计专业。毕业之后，Dora便开始游走于各国，吸收各地首饰设计的精髓，之后又在首尔修学了3年，A.Dorad饰品系列诞生于首尔， 设计师Dora将首尔设为起点并逐步推向国际。2013年，A.Dorad将旗下主力设计师带领进军广州，并以此为基地，以国际化的标准，设计出全新概念饰品。A.Dorad给人们提供高品质的服务，并且拥有独有的工艺。多样的珠宝首饰产品造型更衬托出其前卫、高雅的设计理念。珍贵的矿石搭配流行的创意理念，启迪了人类艺术。A.Dorad饰品符合现代年轻人对珠宝的追求与热爱，充满个性与时尚.它可以满足不同人的需求独家定制专属于自己的水晶饰品。A.Dorad将继续发挥无与伦比的创造力并开启通往浪漫梦幻的大门。',
-            showMore: false
+            showMore: false,
+            letters: [
+                {
+                    id: 'A',
+                    name: 'A'
+                },
+                {
+                    id: 'B',
+                    name: 'B'
+                },
+                {
+                    id: 'C',
+                    name: 'C'
+                },
+                {
+                    id: 'D',
+                    name: 'D'
+                },
+                {
+                    id: 'E',
+                    name: 'E'
+                }
+            ]
         });
         });
 
 
         return finalResult;
         return finalResult;

@@ -12,8 +12,8 @@
         <div class="expand"></div>
         <div class="expand"></div>
         <div class="collapse"></div>
         <div class="collapse"></div>
     </div>
     </div>
-{{/ result}}
 
 
-<div id="letter-list">
-    <letter-list></letter-list>
-</div>
+    <div id="letter-list">
+        <letter-list items={{letters}}></letter-list>
+    </div>
+{{/ result}}

@@ -14,7 +14,7 @@ var $expand = $('.expand'),
     $brandIntro = $('.brand-intro'),
     $brandIntro = $('.brand-intro'),
     exCoTm = 6; // 展开隐藏的倍数
     exCoTm = 6; // 展开隐藏的倍数
 
 
-var vm = new Vue({
+new Vue({
     el: '#letter-list',
     el: '#letter-list',
     components: {
     components: {
         letterList: letterList
         letterList: letterList

 <template>
 <template>
     <ul class="list-box">
     <ul class="list-box">
-        <li><a href="#">A</a></li>
-        <li><a href="#">B</a></li>
-        <li><a href="#">C</a></li>
-        <li><a href="#">D</a></li>
-        <li><a href="#">E</a></li>
+        <li v-for="item in items"><a href="#{{item.id}}">{{item.name}}</a></li>
     </ul>
     </ul>
 </template>
 </template>
 <style>
 <style>
+    body {
+        background: #000;
+    }
 
 
-    .list-box{
+    .list-box {
         position: fixed;
         position: fixed;
         height: 100%;
         height: 100%;
         width: 30px;
         width: 30px;
-        padding: 0;
+        margin: 0;
+        padding: 6px;
         right: 0;
         right: 0;
+        border-radius: 8px;
+        background: #fff;
+        opacity: 0.8;
 
 
         li {
         li {
             list-style: none;
             list-style: none;
@@ -23,11 +26,8 @@
 
 
 </style>
 </style>
 <script>
 <script>
-    export default{
-        data(){
-            return{
-                msg:'hello vue'
-            }
-        }
-    }
+    module.exports = {
+        props: ['items']
+    };
+
 </script>
 </script>