Vue

by shamaleyte

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
               v-on:change="toggle(todo)"
               v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>

  <!-- Vue Template HTML Markup -->
  <v-app id="inspire">
    <v-card
            :loading="loading"
            class="mx-auto my-12"
            max-width="374"
            >
      <template slot="progress">
        <v-progress-linear
                           color="deep-purple"
                           height="10"
                           indeterminate
                           ></v-progress-linear>
      </template>

      <v-img
             height="250"
             src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
             ></v-img>

      <v-card-title>Cafe Badilico</v-card-title>





      <v-card-actions>
        <v-btn
               color="deep-purple lighten-2"
               text
               @click="reserve"
               >
          Reserve
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    loading: false,
    selection: 1,
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
       reserve() {
      this.loading = true;

      setTimeout(() => this.loading = false, 2000);
    }
  }
})