Vue/Bootstrap Template

index.html

<div id="app">
<nav class="navbar navbar-light bg-light fixed-top">
 
  <div class="navbar-text ml-auto">
    <b>cart:</b> 
     <span class="badge badge-pill badge-success"></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 products"
       v-if="item.price<=Number(maximum)">
   <div class="col-1 m-auto">
    <button class="btn btn-info">+</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">${{ Number(item.price) }}</div>     
    </div>
  </div>
</div>

script.js

var app = new Vue({
 el: '#app',
 data: {
  maximum: 99,
  products: null
 },
 mounted: function() {
  fetch('https://hplussport.com/api/products/order/price')
  .then(response => response.json())
  .then(data => {
    this.products = data;
  })
 }
});

scripts

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

styles

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

vue-bootstrap-template.markdown

Vue/Bootstrap Template

This is a template for working with Vue.js with the Bootstrap framework pre-installed.

A Pen by Ray Villalobos on CodePen.

License.