VueJS get unique values from array of objects based on key in watch

Question

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:

[
  {
    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:

[
      {
        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:

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.

A working example of the problem: here

Tom · Accepted Answer · 2019-01-23 20:06:00Z

1

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) :

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.

edited Jan 23, 2019 at 20:06

answered Jan 23, 2019 at 18:45

Tom

1,4572 gold badges16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ahmed essam Over a year ago

Actually I understand your result but it returns duplicated inputs too! I don't know how!

Tom Over a year ago

That is very surprising. Do you think you could share your current code via jsfiddle.net/boilerplate/vue or any test sharing website ?

Ahmed essam Over a year ago

Sorry for being late but I tried to minimize my code as I could in the JSFiddle example. Kindly check my edited answer

Tom Over a year ago

Here is your jsFiddle working : jsfiddle.net/e2cdyj1h , basically for your flag your were testing on this.form_data.products_credit[x].id instead of this.form_data.products_credit[x].product_id but if you are patient I might be able to work out a better solution than that :)

Tom Over a year ago

First (not much change) : working , without console logs and with a bit of ES6 syntaxic sugar : jsfiddle.net/g8uw1Lp7

|

Collectives™ on Stack Overflow

VueJS get unique values from array of objects based on key in watch

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related