[Vuejs]-Check if same values appear in swatch gallery/document Vue JS

by

0👍

✅

You can store all the information you need within a list of objects:

data: () => ({
    items : [
      {
        id : 1,
        color1 : 'blue',
        color2 : '#fff',
        name: 'swatchName1'
      },
      {
        id : 2,
        color1 : 'red',
        color2 : '#fff',
        name: 'swatchName2'
      }
    ]
  }),

When you need to add a swatch, just push a new object to the array.

One way to validate whether a swatch already exists is to create a method which combines the relevant info into a string:
gradientString (x) { return x.color1 + x.color2 }

Then use another method to compare your new swatch to an array of existing existing:

isUnique(swatch) { 
 return !this.items.map(gradientString).includes(gradientString(swatch)) 
}

Here’s an example: https://jsfiddle.net/ellisdod/23puw5t9/

Leave a comment