This is a template for working with Vue.js with the Bootstrap framework pre-installed.
A Pen by Ray Villalobos on CodePen.
<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> |
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; | |
}) | |
} | |
}); |
<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> |
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> |
This is a template for working with Vue.js with the Bootstrap framework pre-installed.
A Pen by Ray Villalobos on CodePen.