Vue Table

created by VSymonenko [email protected]

by simati

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify/dist/vuetify.min.css">
<div id="Card">
   <v-app>
      <v-card>
         <v-container fluid>
            <v-layout row wrap>
              <v-flex xs12>
                <v-text-field light
                  name="Name"
                  label="Name"
                  id="Name"
                  v-model="product.name"
                ></v-text-field>
                <v-text-field
                  name="Quantity"
                  label="Quantity"
                  id="Quantity"
                  v-model="product.quantity"
                ></v-text-field>
                <v-text-field
                  name="Price"
                  label="Price"
                  id="Price"
                  v-model="product.price"
                ></v-text-field>
              </v-flex>
            </v-layout>
          </v-container>
          <v-btn color="primary" @click="addProduct">add item</v-btn>
        <v-container fluid>
        <table>
          <tr class="header">
            <th>Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th></th>
          </tr>
          <hr>
          <tr v-for="(product, index) in products"
            :key="index">
            <td>{{ product.name }}</td>
            <td>{{ product.quantity }}</td>
            <td>{{ product.price }}</td>
            <td>
              <v-btn small flat icon @click="deleteProduct(index)">
                <v-icon>delete</v-icon>
              </v-btn>
            </td>
          </tr>
        </table>
        <div style="font-weight: lighter; font-size: 22px;">
          Summary: {{summary}}
        </div>
        </v-container>
          <v-dialog v-model="dialog" max-width="290">
            <v-card>
              <v-card-title class="headline">Please check card!</v-card-title>
   ...

CSS

#Card {
  position: fixed;
  display: flex;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.header {
  text-align: left;
}
hr {
  position: relative;
  border-bottom: 1px #ccc;
  bottom: -28px;
}
table {
  width: 760px;
}
.btn {
  width: 130px;
  font-weight: lighter;
  letter-spacing: 2px;
}

JavaScript

var vm = new Vue({
  el: '#Card',
  created() {
  	this.$vuetify.theme.primary = '#00ac9c'; // customize primary colour
  },
  methods: {
    deleteProduct(index) {
      this.products.splice(index, 1);
    },
    addProduct() {
      const name = this.product.name;
      const quantity = this.product.quantity;
      const price = this.product.price;
      if (!isNaN(parseFloat(quantity)) // check card data
        && isFinite(quantity)
        && !isNaN(parseFloat(price))
        && isFinite(price)
        && name) {
        this.products.push(this.product);
        this.product = {};
        return;
      }
      this.dialog = true;
    },
  },
  name: 'Card',
  computed: {
    summary() {
      const sumProducstPrice = this.products
        .map(value => value.quantity * value.price) // get total price for product
        .reduce((acc, cur) => acc + cur, 0); // get summary price for all products
      return sumProducstPrice;
    },
  },
  data: () => ({
    dialog: false,
    product: {
      name: '',
      quantity: '',
      price: '',
    },
    products: [
      {
        name: 'Icecream',
        quantity: 2,
        price: 50,
      },
      {
        name: 'Pizza',
        quantity: 3,
        price: 299,
      },
    ],
  }),
})