Answer the question
In order to leave comments, you need to log in
How to pass data from checkbox to server using post in vue?
Hello. There is a function with which I get json data using get. Next, I dynamically display this data (products in the online store).
Now I need to make a post request to the server, and send to the server those items that will be marked in the checkbox. How to do it?
Here is the store.js file: https://jsfiddle.net/onxkLcqj/
Here is the directory code
<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>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question