Vue 2.0 Hello World: Dirty

by Bruno Sabetta

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p class="clickable" @click="dirtyToggle()">{{ message }}</p>
  <div class="table" ref="container" v-if="isVisible">
    <div v-for="e in data">
      <table-row>
        <table-item>{{e.random}}</table-item>
      </table-row>
    </div>
  </div>
</div>

CSS

.table {
  width: 300px;
  height: 300px;
  overflow: scroll;
  border: 1px solid gray;
}

.clickable {
  cursor: pointer;
}

JavaScript

Vue.component('table-row', {
		  props: {
		    header: {
		      type: Boolean,
		      default: false
		    }
		  },
		  template: '<div><slot></slot></div>',
		});

		Vue.component('table-item', {
		  template: '<div><slot></slot></div>',
		});

		new Vue({
		  el: '#app',
		  data: {
		    message: 'Click to toggle',
		    isVisible: true,
		    data: []
		  },
		  mounted: function() {
		    for (var i = 0; i < 5000; i++) {
		      this.data.push({
		        random: "Random text " + i
		      });
		    }
		  },

		  methods: {
		    dirtyToggle() {
		      if (this.isVisible === false) {
		        this.isVisible = true;
		      } else {
		        this.isVisible = false;
		      }

		    }
		  }
		})