vue js推送参数到URL
vue js推送参数到URL
提问于 2022-05-15 12:13:51
我使用vuejs 3，我想过滤产品。在第一阶段，我希望发送参数到URL，并为此使用vue路由器。目前，我的筛选器只从每个组向URL发送一个params，但我希望将所有params附加到url，从第一组到第二组，我只想将一个params推送到URL(中或大)。
当我选择红色和中等大小时，我的过滤器就像这个localhost:8080/filter?color=red&size=medium。但是，如果我选择两种颜色，它应该附加这两种颜色，我的URL应该如下localhost:8080/filter?color=red&color=blue&size=medium或localhost:8080/filter?color=red&color=blue&size=large
<template>
<div class="products">
<div class="multi_filters">
<h1>Multi Filter By Color</h1>
<a href="#" @click.prevent="activateFilter('color','red')">Red color</a>
<a href="#" @click.prevent="activateFilter('color','blue')">Blue color</a>
</div>
<div class="single_filter">
<h1>Multi Size</h1>
<a href="#" @click.prevent="activateFilter('size','medium')">Medium</a>
<a href="#" @click.prevent="activateFilter('size','large')">Large</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
filters:{},
selectedFilters:{}
}
},
methods:{
activateFilter(key,value){
this.selectedFilters = Object.assign({},this.selectedFilters,{[key]:value})
console.log(this.selectedFilters)
this.$router.replace({
query: {
...this.selectedFilters
}
})
}
}
}
</script>回答 1
Stack Overflow用户
发布于 2022-05-15 12:50:34
您应该为这个应用程序创建这样的数据，urlParams，每次有人点击颜色或大小，并推到它。
data() {
return {
colors: [{id:1, name: "red" }, {id:2, name: "blue" }],
sizes: [{id:1, name: "medium" }, {id:2, name: "large" }],
urlParams: []
};
},还有一些方法：
methods: {
activateFilter(e) {
//get color or size with condition not exist.
if(!this.urlParams.includes(e)){
this.urlParams.push(e);
}
//create params url
const urlParam = this.urlParams.reduce((contains, current) => {
if(this.createArrName(this.colors).indexOf(current) > -1){
return contains += `color=${current}&`
}else{
return contains += `size=${current}&`
}
}, '')
//adapt to url
},
createArrName(arrs) {
return arrs.reduce((contains, current) => {
return contains.concat(current.name)
}, [])
}
},以及你编写的颜色和大小的循环模板：
<template>
<div class="products">
<div class="multi_filters">
<h1>Multi Filter By Color</h1>
<a v-for="item in colors" :key="item.id" @click.prevent="activateFilter(item.name)">
{{ item.name }}
</a>
</div>
<div class="single_filter">
<h1>Multi Size</h1>
<a v-for="item in colors" :key="item.id" @click.prevent="activateFilter(item.name)">
{{ item.sizes }}
</a>
</div>
</div>
</template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72248157
复制相关文章
相似问题
腾讯云开发者
