begin vue filter

<template>
  <div id="app">
      <div class="container">
        <div class="row">
          <div class="col-lg-3">
          
            <form action="" >
               <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" @input="setFilter" name="category" class="form-control">
              </div>
               <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" @input="setFilter" name="zalupa" class="form-control">
              </div>
            </form>
          
          </div>
          <div class="col-lg-9">
            <div class="col-lg-4" v-for="item in listFilsters" :key="item.id">
                {{item.id}}
                {{item.name}}
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
  import axios from 'axios'


  
  export default {
    name: 'app',
    data() {
      return {
        list: null
      }
    },
    components: {
     
    },
     computed: {
        listFilsters: {
            get () {
              return this.list;
            },
            set (value) {
              this.listFilsters = value;
            }
        }
    },
    methods: {
      setFilter: function () {
        var inputs = document.querySelector("form").elements;
        for (var item of inputs) {
            this[item.name](item.value);
        }
        this.go();
      },
      category: function () {
       this.list = 1;
      },
      zalupa: function() {
        this.list = 2;
      },
      go() {
        console.log(this.list);
      }
    },
    created() {
        axios.get("https://jsonplaceholder.typicode.com/users")
				.then(({data}) => {
					this.list = data;
				})
				.catch(error => {
					console.log(error.response)
				})
    }
  }
</script>
<style lang="sass">
@import '~bootstrap/scss/bootstrap.scss'
</style>