TestTask

by TCloud

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">

    <title>Список товаров</title>

    <!-- @VUEJS -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
</head>
<body style="margin: 5% 15%">


<div class="container-fluid" id="app">
    <h1>Список товаров</h1>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Фильтры</h5>
                    <div class="card-text">
                        <form>

                            <div class="form-group" v-for="filter in filters.items">
                                <select @change="changeFilter($event)" class="form-control filter-element">
                                    <option :value="filter.name">{{ filter.title }}</option>
                                    <option v-for="value in filter.values" 
                                        :value="value"> {{ value }} </option>
                                </select>
                            </div>

                            <div class="text-right">
                                <a href="#" class="btn btn-sm btn-secondary"
                                  :class="{ disabled: filters.activated.length == 0 }"
                                  @click="resetFilters()">Сбросить</a>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="alert alert-light" role="alert">
        Найдено товаров: {{ getProductsCount() }}
    </div>
    
    <div class="row no-gutters">
    
       ...

JavaScript

const products = [
    {
      id: 1,
      name: 'куртка красная',
      img: 'https://media.istockphoto.com/photos/male-coat-isolated-on-the-white-picture-id163208487',
      category: 'куртки',
      oldPrice: 5880,
      price: 4790,
      brand: 'super',
      size: 31,
      color: 'красный'
    },
    {
      id: 2,
      name: 'куртка большая',
      img: 'https://media.istockphoto.com/photos/red-womans-sports-jacket-picture-id520887025',
      category: 'куртки',
      oldPrice: 5900,
      price: 3790,
      brand: 'super',
      size: 42,
      color: 'зеленый'
    },
    {
      id: 3,
      name: 'куртка модная',
      img: 'https://media.istockphoto.com/photos/male-coat-isolated-on-the-white-picture-id163208487',
      category: 'куртки',
      price: 5550,
      brand: 'puper',
      size: 37,
      color: 'красный'
    },
    {
      id: 4,
      name: 'куртка выгодная',
      img: 'https://media.istockphoto.com/photos/red-womans-sports-jacket-picture-id520887025',
      category: 'куртки',
      oldPrice: 7900,
      price: 1990,
      brand: 'super',
      size: 29,
      color: 'зеленый'
    }
  ];

const filters = [
    { name: "brand", title: "Бренд", values: [ "super", "poper", "cool", "awesome" ] },
    { name: "size", title: "Размер", values: [ 29, 42, 37, 31, 35 ] },
    { name: "color", title: "Цвет", values: [ "зеленый", "красный", "синий", "желтый" ] }
]

var app = new Vue({
    el: "#app",
    /*============ H O O K S ============*/
    created: function() {
        // filters and products is external varibles;
        this.setFilters( filters );
        this.setProducts( this.getOriginProducts() );
    },
    /*============= D A T A =============*/
    data: {
        products: {
            items: [],
            selected: -1
        },
        filters: {
            activated: [],
            items: []
        }
    },
    /*========= M E T H O D S ===========*/
    methods: {
        getOriginProducts: function() {
           ...