VUE JS附加参数到URL
我正在使用vuejs3，我想制作过滤器。当用户单击链接时，我想将URL附加到浏览器地址栏中。稍后，我将提出AJAX请求以更新产品列表。
到目前为止，我能够将参数发送到URL，但是只有一个组中的一个项目。从第一个颜色组，我希望用户只选择一个，而是从第二尺寸组中选择我希望用户选择多个。 我想要这种类型的URL：localhost：8080/product？color = red＆amp; size =中＆amp; size =大
<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>
I am using vuejs3 and I want to make a filter. When user click to the link I want to append the url and push it to browser address bar for now. Later I will do ajax request to update page with product list.
So far I am able to send parameters to URL, but only one item from one group.From first color group I want user to select only one but from second size group I want user to select multiple.
I want this type of URL: localhost:8080/product?color=red&size=medium&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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您期望大小是一个数组，此 post 会有所帮助。
可以通过几种不同的方式提交多价值表单字段，即通过get/post var提交数组，因为标准不一定要阐明。
发送多值字段或数组的三种可能方法是：
？car [] = saab＆amp; car [] = audi（最佳方法 - php将其读取到数组中）cars = cars = saab＆amp; car = audi（坏路 - php只会注册最后一个值）？cars = saab，audi（尚未尝试过）You are expecting size to be an array, this post will helps.
Submitting multi-value form fields, i.e. submitting arrays through GET/POST vars, can be done several different ways, as a standard is not necessarily spelled out.
Three possible ways to send multi-value fields or arrays would be:
?cars[]=Saab&cars[]=Audi(Best way- PHP reads this into an array)?cars=Saab&cars=Audi(Bad way- PHP will only register last value)?cars=Saab,Audi(Haven't tried this)