Vue positioning display

after the purchase is completed, you need to locate the corresponding grid and open the corresponding grid as the one for express delivery. This is the corresponding grid highlighting

.

the question is: how do you locate and highlight these locations?

Mar.20,2021

give each item an ID

<ul>
  <li data-id="0"></li>
  <li data-id="1"></li>
  <li data-id="2"></li>
  <li data-id="3"></li>
</ul>

after purchase, users get the parameters for comparison. If you buy an item with an id of 1
you add a class to the item with a data-id of 1

<style>
 .selected{
  background:yellow;
}
</style>

<ul>
  <li data-id="0"></li>
  <li class="selected" data-id="1"></li>
  <li data-id="2"></li>
  <li data-id="3"></li>
</ul>
Menu