index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href="app.css">
</head>
<body class="">

    <div class="container" id="app">
        <nav class="navbar navbar-light fixed-top">
            <div class="navbar-text ml-auto d-flex">
                <button class="btn btn-sm btn-outline-success" @click="style.sliderStatus = !style.sliderStatus">
                    <i class="fa fa-dollar-sign"></i>
                </button>
                <div class="ml-2">
                    <button class="btn btn-success btn-sm dropdown-toggle" id="dropdownCart" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <b>cart:</b>
                        <span class="badge badge-pill badge-success">{{ cart.length }}</span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCart">
                        <div v-for="(item, index) in cart" :key="index">
                            <div class="dropdown-item-text text-nowrap text-right">
                                <span class="badge badge-pill badge-warning align-text-top mr-1">
                                    {{ item.qty }}
                                </span>
                                {{ item.name }}
                                <b>{{ item.price | currencyFormat }}</b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <br>
        <h1>My Shop</h1>
        <transition name="custom" enter-active-class="animated fadeInDown" leave-active-class="animated slideOutRight">
            <div v-if="style.sliderStatus">

                <div class="align-items-center" :class="sliderState">
                    <label for="" :class="style.label">Max</label>
                    <input type="number" class="form-control mx-2" :style="{'width' : '60px', 'text-align' : 'center'}" v-model="maximum">
                    <input type="range" class="custom-range" min="0" max="1000000" v-model="maximum">
                </div>
            </div>
        </transition>

        <transition-group name="fade" tag="div" @beforeEnter="before" @enter="enter" @leave="leave">
            <div class="row d-none mb-3 align-item-center" v-for="(item, index) in products" :key="item.id">
                <div v-if="item.price <= Number(maximum)" :data-index="index">
                    <div class="col-1 m-auto">
                        <button class="btn btn-info" v-on:click="addItem(item)">+</button>
                    </div>
                    <div class="col-sm-4">
                        <img :src="item.image" :alt="item.name" class="img-fluid d-block">
                    </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 | currencyFormat }}</div>
                    </div>
                </div>
            </div>
        </transition-group>

    </div>

    <!-- <div id="app">
        <img class="img-fluid" v-bind:src="image" v-bind:alt="name" style="height: 250px; width: 300px;">
        <h2>{{ name }}</h2>
        <p>{{ description }}</p>
        <div class="h3">Rp. {{ price }}</div>
    </div> -->


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
</html>