Vue 2.0 Hello World

by acdcjunior

HTML

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/vuetify@1.0.4/dist/vuetify.min.css'>
<script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.4/dist/vuetify.min.js'></script>


<div id="app">
<v-app>
   <v-select label="Select a Plan" :items="planNames" v-model="selected" single-line max-height="auto" @change="fillData" required></v-select>
   <br>
   datacollection.datasets[0].label: {{ datacollection.datasets[0].label }}
</v-app>
</div>

CSS

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

  {
  opacity: 0;
}

JavaScript

console.clear();
new Vue({
  el: "#app",
  data: () => ({
    datacollection: {
      labels: ['Week-1', 'Week-2', 'Week-3'],
      datasets: [{
        label: '',
        backgroundColor: '#C58917',
        data: [40, 50, 20]
      }]
    },
    selected: []

  }),
  computed: {
		planNames() { return ['aaaaaaaaaaaa', 'bbbbbbbbbbb']}
  },
  mounted() {
    
  },
  methods: {
    fillData(selected) {
      console.log('fillData called with: ', selected);
      this.datacollection.datasets[0].label = selected;
    },
  }
})