Как передать данные из checkbox на сервер с помощью post на vue?

Question

Anna123456789 @Anna123456789

Vue.js

Как передать данные из checkbox на сервер с помощью post на vue?

Здравствуйте. есть функция , с помощью которой с помощью get получаю данные json. Далее я динамически отображаю эти данные( товары в интернет-магазине).
Сейчас мне надо сделать post запрос на сервер , и передать на сервер те пункты,которые будут отмечены в checkbox. Как это сделать?

Вот файл store.js : https://jsfiddle.net/onxkLcqj/
Вот код каталога

<template>
<div class="v-catalog">
<div class="filters">
        <v-select
            :options="categories"
            @select="sortByCategaries"
            :selected="selected"
        />
        <span class="selectPrice">Select price</span>
        <div class="range-value">
          <p class="valueRange">Min: {{minPrice}}$</p>
          <p class="valueRange">Max: {{maxPrice}}$</p>
        </div>
        <div class="range-slaider">

          <input
              type="range"
              min="0"
              max="10000"
              step="10"
              v-model.number="minPrice"
              @change="setRangeSliders"
          >
          <input
              type="range"
              min="0"
              max="10000"
              step="10"
              v-model.number="maxPrice"
              @change="setRangeSliders"
          >
        </div>
        <div class="checkbox">
          <label ><input type="checkbox" value="All" id="All">All</label>
          <label ><input type="checkbox" value="Male" id="Male">Male</label>
          <label ><input type="checkbox" value="Female" id="Female">Female</label>
        </div>

      </div>
 <div class="v-catalog__list">
        <v-catalog-item
            v-for="product in filterPtoducts"
            :key="product.article"
            v-bind:product_data="product"
            @addToCart="addToCart"
        />
      </div>
    </div>

</template>

<script>
import vCatalogItem from './v-catalog-item'
import {mapActions, mapGetters} from 'vuex'
import vSelect from './v-select'


export default {
  name: "v-catalog",
  components: {
    vCatalogItem, vSelect
  },
  data() {
    return {
      categories: [
        {name: 'All', value: 'All'},
        {name: 'Male', value: 'M'},
        {name: 'Female', value: 'F'}

      ],
      selected: 'Select',
      sortedProducts: [],
      minPrice:0,
      maxPrice:10000

    }


  },
  computed: {
    ...mapGetters([
      'PRODUCTS',
      'CART'
    ]),
    filterPtoducts() {
      if (this.sortedProducts.length) {
        return this.sortedProducts
      } else {
        return this.PRODUCTS
      }
    }


  },

  methods: {
    ...mapActions([
      'GET_PRODUCTS_FROM_API',
      'ADD_TO_CART'
    ]),
    addToCart(data) {
      this.ADD_TO_CART(data)
    },
    sortByCategaries(category) {
      let vm=this;
      this.sortedProducts = [...this.PRODUCTS];
      this.sortedProducts = this.sortedProducts.filter(function (item){
        return item.price >= vm.minPrice && item.price <= vm.maxPrice
      })
      if (category) {
        this.sortedProducts = this.sortedProducts.filter(function (e) {
          vm.selected === category.name;
          return e.category === category.name
        })
        vm.selected=category.name;
      }
    },
    setRangeSliders(){
      if (this.minPrice > this.maxPrice){
        let tmp = this.maxPrice;
        this.maxPrice = this.minPrice;
        this.minPrice = tmp;
      }
      this.sortByCategaries();
    },

  },
  mounted() {
    this.GET_PRODUCTS_FROM_API()
        .then((responce) => {
          if (responce.data) {
            this.sortByCategaries()
          }
        })
  }
}


</script>