How to use vue on a collection of elements?

Question

JavaScript

Good afternoon. There is a one-page online store, the page of which is built at the expense of Razor. A list of products is displayed from the database. At the moment, vanilla JS describes the logic of adding products to the cart, saving it in LocalStorage. The cart itself is implemented using a modal window.
The cart itself is rendered in the modal via innerHTML or via appendChild.
After looking at the information that vue can be connected simply with a file to the project, I decided to implement all the logic of drawing a basket and adding products on vue. But, in all examples, vue clings to the block id.
I have the opposite. There is a set of product cards. When clicked, the product is added to the cart. How do I hook up a click listener via vue to a group of elements.

Answer 1

Vue doesn't quite work that way.
It starts from javascript data and html is built on it.
Those. this div to which vue clings serves as a template, not a data source. Its content will be replaced by Vue.