[英]VueJS get unique values from array of objects based on key in watch
I have a watch to check the selected tags: 我有一块手表检查选定的标签:
watch: {
search (val) {
for (let i = 0; i < val.length; i++) {
this.form_data.products_credit.push({
product_id: val[i].id,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
});
}
}
}
This works fine but the problem when the user select for example tag1 then this.form_data.products_credit
value is equal to: 这可以很好地工作,但是当用户选择例如tag1时,此问题就等于
this.form_data.products_credit
值等于:
[
{
product_id: 1,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
}
]
After that if the user selected tag2 then this.form_data.products_credit
result will be: 如果用户选择TAG2之后再
this.form_data.products_credit
结果将是:
[
{
product_id: 1,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
},
{
product_id: 2,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
},
{
product_id: 2,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
}
]
What I am expecting:
我期望的是:
I was not expecting the duplicated that happened after selecting another tag but that is normal since I am looping throw them. 我没想到选择另一个标签后会发生重复,但这是正常的,因为我要循环将它们扔掉。
What I have done:
我做了什么:
I have tried to empty my products_credit
before the loop like this: 我试图在循环之前清空我的
products_credit
,如下所示:
this.form_data.products_credit = []
before the loop. 在循环之前。
It worked fine but I don't want it that way because it will has side-effects on my next step. 它工作正常,但我不希望这样,因为它会在下一步中产生副作用。
You can check your array does not already contains your product before adding it : 您可以在添加阵列之前检查阵列中是否不包含产品:
watch: {
search (val) {
for (let i = 0; i < val.length; i++) {
if (
!this.form_data.products_credit.some(item => {
item.product_id === val[i].id
})
) {
this.form_data.products_credit.push({
product_id: val[i].id,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
});
}
}
}
}
But I feel like there are much simpler and quicker solutions to your problem with computed properties based on an array of tags generated by a user's input . 但是,我觉得有一个基于用户输入生成的标签数组的计算属性,可以更轻松,更快速地解决您的问题。 If you are able to share more of what you are doing, maybe we can find a better solution.
如果您能够分享更多正在做的事情,也许我们可以找到更好的解决方案。
Edit : After seeing your JSFiddle, here is a proposition to handle your problem using only a computed property ( JSFiddle ) : 编辑:看到您的JSFiddle之后,这是一个仅使用计算属性( JSFiddle )处理您的问题的命题:
data: {
search: [],
products: [
{
id: 1,
title: "first product",
category: "first category",
image: "first_image.jpg",
barcode: "123123123"
},
{
id: 2,
title: "second product",
category: "second category",
image: "second_image.jpg",
barcode: "23232323"
},
],
form_data: {
category: null,
products_credit: [],
}
},
methods: {
searchProducts (query) {
//
}
},
computed : {
selectedProduct () {
return this.search.map(item => {
return {
product_id: item.id,
quantity: null,
package_size: null,
purchase_price: null,
warehouse_id: null
}
})
}
}
This is a preferred way to do this because the code is shorter, and there are no watchers which are resource-expensive. 这是执行此操作的首选方法,因为代码更短,并且没有监视程序消耗资源。 Also it handles removing items from the user's search at the same time.
它还处理从用户的搜索中同时删除项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.