Vue.js - Overview

index.html

<div class="container" id="app">
    <nav class="navbar navbar-light bg-light fixed-top" v-if="cart.length > 0">
        <div class="navbar-text ml-auto">
            <strong>cart:</strong>
            <span class="badge badge-pill badge-success">{{ cart.length }}</span>
        </div>
    </nav>
    
    <div class="form-inline mr-auto mt-5">
        <label class="font-weight-bold mr-2" for="formMax">Max $</label>
        <input type="text" id="formMax" class="form-control w-25" v-model="maximum">
    </div>
    <input type="range" class="custom-range" min="0" max="200" v-model="maximum">
    
    <div class="row d-flex mb-3 align-items-center" v-for="item in availableProducts">
        <div class="col-1 m-auto">
            <button class="btn btn-info"
                    v-on:click="addItem(item)">+</button>
        </div>
        <div class="col-4">
            <img class="img-fluid d-block" :src="item.image" :alt="item.name">
        </div>
        <div class="col">
            <h3 class="text-info">{{ item.name }}</h3>
            <p class="mb-0">{{ item.description }}</p>
            <div class="h5 float-right">${{ item.price }}</div>
        </div>
    </div>
</div>

script.js

const api = 'https://hplussport.com/api';

var app = new Vue({
    el: '#app',
    data: {
        maximum: 99,
        products: null,
        cart: []
    },
    methods: {
        addItem: function(product) {
            this.cart.push(product);
        }
    },
    computed: {
        availableProducts: function () {
            return (this.products || []).filter(p => p.price <= Number(this.maximum));
        }
    },
    mounted: function() {
        fetch(`${api}/products/order/price`)
            .then(response => response.json())
            .then(data => {
                this.products = data;
            });
    }
});

scripts

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

vue-js-overview.markdown

Vue.js - Overview

A Pen by Luís Severgnini on CodePen.

License.