VueJs CSV reader

by maxell4o

HTML

<div id="app">
  <input type="file" @change="change($event)" accept=".csv">
  <div class="file">
    <ul class="groups left">
      <li v-for="group in groups">
        <span class="title">{{group.name}}</span>
        <ul v-if="group.groups.length" class="sub-groups">
          <li v-for="subGroup in group.groups">
            <span class="title">{{subGroup}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="groups right">
      <li v-for="group in websiteGroups">
        <span class="title">{{group.name}}</span>
        <ul v-if="group.groups.length" class="sub-groups">
          <li v-for="subGroup in group.groups">
            <span class="title">{{subGroup}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="clearfix"></div>
  </div>
</div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.file {
  padding: 10px 0;
  font-size: 12px;
}

.groups {
  float: left;
  &.right{
    float: right;
  }
  width: 50%;
  & > li{
  margin-bottom: 20px;
  & > .title{
    font-weight: bold;  
  }
}
}

.sub-groups{
  margin-left: 20px;
  .title{
    margin-top: 2px;
    display: inline-block;
  }
}

.clearfix{
  clear: both;
}

Vue

new Vue({
  el: "#app",
  data: {
    groups: [],
   	websiteGroups: [
  {
    "name": "АВТОЕЛЕКТРОНИКА",
    "groups": [
      "АВТО АКСЕСОАРИ",
      "АВТО АНТЕНИ, БУКСИ И ПРЕХОДНИЦИ",
      "АВТО КРУШКИ И ЦОКЛИ ЗА ТЯХ",
      "АВТО ПАНЕЛИ, РАМКИ, АДАПТОРИ ЗА ГОВОРИТЕЛИ И ДР.",
      "АВТО ПРЕДПАЗИТЕЛИ И ДЪРЖАЧИ",
      "АВТО СЪЕДИНИТЕЛИ",
      "АВТО УСИЛВАТЕЛИ И КАБЕЛИ ЗА ТЯХ",
      "ЗАХРАНВАЩИ АКСЕСОАРИ, КОНВЕРТОРИ И БУКСИ"
    ]
  },
  {
    "name": "АВТОМАТИКА",
    "groups": [
      "АВТОМАТИЧНИ ПРЕДПАЗИТЕЛИ И ДЕФЕКТНОТОКОВИ ЗАЩИТИ",
      "БРОЯЧИ",
      "КОНВЕРТОРИ НА СИГНАЛИ",
      "РЕГУЛАТОРИ НА МОЩТНОСТ(ФАЗОВИ И ДР.)",
      "СЕНЗОРИ И ПРЕОБРАЗУВАТЕЛИ",
      "СЕНЗОРИ И ПРЕОБРАЗУВАТЕЛИ - ДРУГИ",
      "СРЕДСТВА ЗА АВТОМАТИЗАЦИЯ-РАЗНИ",
      "УСТРОЙСТВА ЗА КОНТРОЛ И УПРАВЛЕНИЕ"
    ]
  },
  {
    "name": "БУКСИ, КОНЕКТОРИ И СЪЕДИНИТЕЛИ",
    "groups": [
      "БУКСИ AUDIO-VIDEO",
      "БУКСИ DVI, HDMI и др",
      "БУКСИ RF, ПРЕХОДНИЦИ И СПЛИТЕРИ",
      "БУКСИ ЗАХРАНВАЩИ AC",
      "БУКСИ ЗАХРАНВАЩИ DC",
      "БУКСИ ЗАХРАНВАЩИ DC авто",
      "БУКСИ ЗАХРАНВАЩИ СОЛАРНИ",
      "КЛЕМИ",
      "КОНЕКТОРИ",
      "СЪЕДИНИТЕЛИ D-sub",
      "СЪЕДИНИТЕЛИ RJ И ПРЕХОДНИЦИ",
      "СЪЕДИНИТЕЛИ USB",
      "СЪЕДИНИТЕЛИ ЗА ТРАНСФЕР НА ДАННИ",
      "СЪЕДИНИТЕЛИ ИНДУСТРИАЛНИ",
      "СЪЕДИНИТЕЛИ ИНДУСТРИАЛНИ AUTOMOTIVE",
      "СЪЕДИНИТЕЛИ РАЗНИ"
    ]
  },
  {
    "name": "ЕЛ. МАТЕРИАЛИ И РАЗКЛОНИТЕЛИ",
    "groups": [
      "ЕЛ.МАТЕРИАЛИ - РАЗНИ",
      "РАЗКЛОНИТЕЛИ",
      "БЕЗ ЗАЩИТА",
      "СЪС ЗАЩИТА",
      "РАЗКЛОНИТЕЛИ БЕЗ ЗАЩИТА"
    ]
  },
  {
    "name": "РАЗКЛОНИТЕЛИ",
    "groups": [
      "БЕЗ ЗАЩИТА",
      "СЪС ЗАЩИТА"
    ]
  },
  {
    "name": "ЕЛЕКТРО-МЕХАНИЧНИ ЕЛЕМЕНТИ",
    "groups": [
      "ВЕНТИЛАТОРИ",
      "АКСЕСОАРИ ЗА ВЕНТИЛАТОРИ",
      "ВЕНТИЛАТОРИ AC",
      "ВЕНТИЛАТОРИ DC",
      "КУТИИ, ПЛАТКИ, МЕХАНИЧНИ ЕЛЕМЕНТИ",
      "АКСЕСОАРИ ЗА КОРПУСИ",
      "ДИСТАНЦИОНЕРИ И КРЕПЕЖНИ ЕЛЕМЕНТИ",
      "ИЗОЛАТОРИ И ПОДЛОЖКИ",
   ...