Работа JS в vue js

150

11 апреля 2019, 11:00

Не работает js код, когда пытаюсь собрать его с помощью vue. Всё отрисовывается корректно, но не запускается скрипт, не меняются выделенные цвета. Если что, вот песочница с этим макетом https://codepen.io/Ni55aN/pen/ELGMOy.

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>vue-spa</title>
      </head>
      <body>
        <div id="traffic-light"></div>
        <script src="/dist/build.js"></script>
      </body>
    </html>

<template>
    <div id="traffic-light">
        <div class="light red" :class="{active: current=='red'}"></div>
        <div class="light yellow" :class="{active: current=='yellow'}"></div>
        <div class="light green" :class="{active: current=='green'}"></div>
    </div>
</template>

    <script>
    export default {
      name: 'traffic',
      data () {
          return {
              current: 'red'
          }
        }
    }
    </script>
    <style>
    body {
      background: linear-gradient(rgb(52, 166, 255), rgb(71, 124, 255));
      height: 100vh;
    }
    #traffic-light {
      width: 70px;
      height: 240px;
      background: #222;
      border-radius: 8px;
      margin: auto;
      padding: 15px;
    }
    .light {
      display: inline-block;
      border-radius: 100%;
      width: 70px;
      height: 70px;
      margin-bottom: 8px;
      opacity: 0.2;
      transition: opacity 0.2s
    }
    .active {
      opacity: 1;
    }
    .red {
      background: red;
    }
    .yellow {
      background: yellow;
    }
    .green {
      background: green;
    }
    </style>


    import Vue from 'vue'
    import router from './router'
    import traffic from './traffic.vue'
    Vue.config.productionTip = false
    class State {
      constructor(name, dur, next){
        this.name = name;
        this.dur = dur;
        this.next = next;
      }
    }
    class Constroller {
      trigger(state, callback){
        callback(state);
        setTimeout(()=>{
          this.trigger(state.next, callback);
        }, state.dur * 1000)
      }
    }

    var app = new Vue({
    el: '#traffic-light', 
      router,
      template: '<traffic/>',
      components: { traffic },
      mounted(){
        var constroller = new Constroller();
        var red = new State('red', 2);
        var yellowR = new State('yellow', 1);
        var yellowG = new State('yellow', 1);
        var green = new State('green', 3);
        red.next = yellowR;
        yellowR.next = green;
        green.next = yellowG;
        yellowG.next = red;
        constroller.trigger(red, (state)=>{
          this.current = state.name;
        });
      }
    })

Answer 1

необходимо было class-ы и mounted() перенести из .js файла в .vue файл