Есть страница со списком товаров, которые генереруются на PHP Хочу на JS собрать все необходимые данные по каждому товару: название, цена и другие. Потом на основе этих данных сгенерировать на VueJS карточки товара с другой разметкой. Я на js-фреймворках новичок. Пока только придумал создать компонент:
Vue.component('newProduct', {
template: `Здесь вся новая разметка товара`
});
И в него вставлять данные по каждой карточке товара, полученные гипотетически вот таким образом:
data: {
goods: [{
title: $('.titleProduct').text(),
price: $('.priceProduct').text()
},{
title: $('.titleProduct').text(),
price: $('.priceProduct').text()
}]
}
Не знаю как во вью правильно парсить... поэтому банально собрать по всему html как-нибудь данные И потом размножить компонент на полученное количество товаров:
<newProduct v-for="product in goods"></newProduct>
Предложите, пожалуйста, ваши варианты как это можно сделать проще именно на Vue. Может есть какие-то стандартные практики? Понятно, что правильнее сделать это на PHP, но нужно именно с этим фреймворком.