Rafael 🌵
Для v-for нужно указывать :key
Rafael 🌵
Про это ещё в доках по vue написано
Roman
Roman
так вот странно что если как в доках написать то всё-равно ругается на внутренний элемент
Denis
(product, key)
Denis
template!!!!!!!
Denis
Переименуй второй
Roman
не ругается только если на router-link атрибут добавить :key="product.id"
Roman
только я логики не понимаю, нафига?!
Denis
template!!!!!!!
Yaroslav 🇺🇦
template!!!!!!!
Дэн, что темплате? Что не так. Или ты опять за старое херь пороть?
Denis
Зарезервированный же элемент
Denis
Yaroslav 🇺🇦
https://ru.vuejs.org/v2/api/#template
Denis
Yaroslav 🇺🇦
Не нашел там
https://ru.vuejs.org/v2/guide/list.html#v-for-%D0%B8-template
Yaroslav 🇺🇦
Не то с поиска взял
Roman
оу
Roman
Roman
вот так вроде норм
Roman
только не product.key a product.id, сморозил тоже))
Yaroslav 🇺🇦
Вообще списки желательно через ul выводить, это база.
Roman
Roman
я-ж просто элемент несколько таз повторить хочу
Denis
Roman
<template><div class="grid">
<router-link
class="link"
v-for="product in products"
:key="product.id"
:to="{name: 'product', params: {productId: product.id}}">
<product-card
class="card"
:name="product.name"
:previewImageUrl="product.pictures[product.previewPicture]"
:price="product.price / 100"
currency="€">
</product-card>
</router-link>
</div></template>
Yaroslav 🇺🇦
хмм, а зачем?
это к верстальщикам, есть же ридеры всякие, которые html по другому видят. Это гуглицца
Roman
Roman
однако онлайн-магазин в ридере читать это по-моему извращение))))
Denis
Roman
бывает))
Roman
ну.. да, можно конечно и так
Denis
Так ты сможешь далее изменять <product-card /> как хочешь
Igor
Поделитесь, вы разделяете на серверный проект и клиенский, или делаете общую структуру?
Сервер node, клиент vue-cli
Denis
:previewImageUrl
лучше писать
:preview-image-url
@Romshark
Denis
Denis
Roman
@yarossl кстати, я в created компонента возвращаю Promise
data() {
return {
loading: true,
products: {}
};
},
created() {
console.log('created hook');
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('fill data');
this.products = testdata;
this.loading = false;
resolve();
}, 1000);
});
}
но такое чувство будто он когда на сервере рендерит этого промиса не дожидается ибо при перезагрузке страницы он теоретически же должен секунду обождать и через секунду только вернуть полностью отрендеренную страницу, а он мне при перезагрузке loading screen отображает
Roman
или asyncData похрен на тот промис что из created возвращается?
Igor
А сервер че?
А сервер это nodejs + express. Тоесть клиент общается с сервером через api.
Как будет правильнее разделить структуру, на 2 проекта отдельных или перемешать все зависимости в один
Denis
Roman
Yaroslav 🇺🇦
Denis
Denis
Пусть его Express и отдает
Igor
Пусть его Express и отдает
В таком случаи у меня будет package.json, где мне нужно забилдить клиент, запустить api и они все будут иметь общие зависимости. Как то монолитно слишком
Denis
Denis
Olexandr
а какая задача
Igor
Наверное сделаю 2 отдельных проекта, но при запуске сервера буду отдавать статику с соседнего проекта..
Хочется какой-то архитектуры MVC но пока не нашел этого решения
Anonymous
https://alligator.io/js/copying-to-clipboard/
Denis
Olexandr
Изоморфное приложение
Olexandr
Да, тебе нужна такая реализация, вот типа Adonis как пример фреймворка
Olexandr
https://ru.vuejs.org/v2/guide/ssr.html
Olexandr
вот кстати есть оф. указание на NuxtJS
Olexandr
я правда не работал
Denis
Igor
MVC я имел ввиду .net
Olexandr
Изоморфное приложение - это универсальное. У тебя есть и статика сразу и API
Olexandr
и сервер связан с клиентом
Denis
Olexandr
и проблем с SEO нет
Lev
Как все же лучше - готовить данные в экшенах сразу так, чтобы их было просто отобразить или делать это преобразование в компонентах?
Denis
Stanislav
Igor
Adonis - именно на JS
Я посмотрю, спасибо. Но я имел ввиду именно структуру проекта, когда есть разные проекты но все равно это один целый проект.