VueJS Getting Started

Let's get started with VueJS!

by wostex

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <div class="col-sm-6" v-for="(area, index) in areaSections"> 
    <section class="monitoring-areas section" v-on:click="changeActive(index)"> 
        <h3>
          Area {{index + 1}}: {{area.title}}
          <span class="section-image hidden-xs hidden-sm"> 
            <i class="icon icon-zoom"></i> 
            <router-link to="/edit-monitoring-area">
              <i class="icon icon-pen"></i>
            </router-link>
          </span>
        </h3>                         
        <div class="section-content" v-bind:class="{ active: index == isActive }"> 
            <div class="row"> 
                <div class="col-xs-5"> 
                    <div v-html="area.img"></div>                                      
                </div>                                                                     
            </div>                                 
            <div class="row hidden-lg visible-sm visible-xs visible-md"> 
                <div class="col-lg-7 col-sm-8 col-xs-7 mb"> 
                    <p class="fw700"><span class="green">Email Alerts:</span> Monthly</p> 
                </div>                                                                                                     
           </div>                             
        </div>                                                       
    </section>                                                  
</div>
</div>

CSS

.active {
   background: yellow
}

JavaScript

new Vue({
  el: '#app',
  data: {
    areaSections: [...],
    isActive: null
  },
  methods: {
    changeActive(index) {
      this.isActive = this.isActive === index ?  null : index
    }
  }
})