Vue get/set interface

by Edward Tanguay

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="vue">
  <b-progress :value="counter" :max="max" show-progress animated></b-progress>
  <b-progress class="mt-1" :max="max" show-value>
    <b-progress-bar :value="counter*(6/10)" variant="success"></b-progress-bar>
    <b-progress-bar :value="counter*(2.5/10)" variant="warning"></b-progress-bar>
    <b-progress-bar :value="counter*(1.5/10)" variant="danger"></b-progress-bar>
  </b-progress>
  <b-btn class="mt-4" @click="clicked">Click me</b-btn>
  <div>
  {{rand}}
  </div>
</div>

CSS

body {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#vue',
  data() {
    return {
      counter: 45,
      max: 100,
      rand: 0
    }
  },
  methods: {
    clicked() {
    	this.rand = Math.random();
      this.counter = this.rand * this.max;
      console.log(this.counter);
      console.log(this.counter * 100);
      console.log(this.counter * 100) / 100));
      console.log("Change progress to " +
        Math.round(this.counter * 100) / 100);
    }
  }
})