Help with Creating Multi Option Selector for Variants

[osseonews]

I am hoping someone can help me figure out how to use Vanjs to create an option selector on ecommerce site where a user selects different options whose combination corresponds to a list of variants for a product. I have tried to use the VanUI, OptionGroup and Choose, but those examples all have one option only, and I can't get it to work. Thanks.

Basically, my options are as follows on the website:

Options Array. This is what the user chooses from - these are buttons in 2 rows with user choosing Size and then Color:

[
  [
    { name: 'size', value: 'Small' },
    { name: 'size', value: 'Medium' },
    { name: 'size', value: 'Large' }
  ],
  [
    { name: 'color', value: 'Blue' },
    { name: 'color', value: 'Red' },
    { name: 'color', value: 'White' }
  ]
]

The variants array is as follows. When a user selects from the options above this array needs to be filtered so the variant that has the combination of options chosen is selected and the user is informed of the
variant selected via the SKU.

[
  [
    { name: 'size', value: 'Small' },
    { name: 'color', value: 'Blue' },
    { sku: 'SB'}
  ],
  [
    { name: 'size', value: 'Medium' },
    { name: 'color', value: 'Red' },
    { sku: 'MR'}
  ],
  [
    { name: 'size', value: 'Large' },
    { name: 'color', value: 'White' },
  { sku: 'LW'}
  ],
  [
    { name: 'size', value: 'Medium' },
    { name: 'color', value: 'Blue' },
  { sku: 'MB'}
  ],
  [
    { name: 'size', value: 'Medium' },
    { name: 'color', value: 'White' },
    { sku: 'MW'}
  ]
]

[sirenkovladd]

https://jsfiddle.net/Sirenko/a1y8kh4v/64/
This example may look a bit complicated, but I wanted to show the potential of van, your example can be implemented much more simply
You can also use VanX to add a higher level of abstraction and caching (the version above redraws too many components and it can be avoided)

[osseonews]

Thanks very much. Will take a look. i'm coming from the React world, so I assume the van.derive is pretty much like the setState in React and you can also set an initial state with van.state, and subsequent states with van.derive will override that? Thanks again.