VueJS Product Page

Simple Product Page With VueJS and TailwindCSS

by webgleb

HTML

<link rel="stylesheet" href="https://unpkg.com/tailwindcss@%5E2/dist/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" class="container mx-auto">
  <div class="nav-bar bg-green-500 w-full h-16 mb-3 flex items-center justify-between px-6">
    <div class="text-xl text-white font-bold">
      Product Page Lesson
    </div>
    <div id="cart" class="bg-white px-4 py-2 rounded-md">
      Cart ({{ cart.length }})
    </div>
  </div>
  <product :premium="premium"
           @add-to-cart="addToCart"
           @remove-from-cart="removeFromCart"></product>
</div>

CSS

.outOfStock {
  text-decoration: line-through;
}

.activeTab {
  border-bottom: 1px solid green;
  padding-bottom: 3px;
}

JavaScript

var eventBus = new Vue()

        Vue.component('product-review', {
            template: `
                <form class="mb-4" @submit.prevent="onSubmit">

                    <div v-if="errors.length > 0" class="bg-red-100 p-4 rounded mb-2">
                      <p v-for="error in errors">
                        {{ error }}
                      </p>
                    </div>

                    <p class="mb-2">
                      <label for="name" class="inline-block w-16">Name:</label>
                      <input id="name" class="px-3 py-1 border border-gray-200 rounded-md" v-model="form.name">
                    </p>

                    <p class="mb-2">
                      <label for="review" class="inline-block w-16">Review:</label>
                      <textarea id="review" class="px-3 py-1 border border-gray-200 rounded-md" cols="30" v-model="form.review" rows="4"></textarea>
                    </p>

                    <p class="mb-2">
                      <label for="rating" class="inline-block w-16">Rating</label>
                      <select id="rating" class="px-3 py-1 border border-gray-200 rounded-md" v-model.number="form.rating">
                        <option>5</option>
                        <option>4</option>
                        <option>3</option>
                        <option>2</option>
                        <option>1</option>
                      </select>
                    </p>
                    <p class="mb-2">
                      <input type="submit" value="Submit" class="mt-2 text-white px-2 py-1 bg-green-600">
                    </p>

                </form>
            `,
            methods: {
                onSubmit() {
                    if (this.form.name && this.form.review && this.form.rating) {
                        let productReview = {
                            name: this.form.name,
                            review: this.form.review,
                            rating: this.form.rating,
...