у меня прототип, но там карта по центру, а вокруг нее все эти формочки

и все это захерачено в одном компоненте

прототип работает?

если да, то это онли вопрос вёрстки дальше

да

куда картинку выкинуть можно, чтобы тебе показать?

да можешь в личку закинуть

Коллеги, есть вопрос - у меня есть примерный вариант решения задачи. ПОдскажите правильно ли мыслю. Задача: при рендеринге строки в таблице анимировать ей фон. Моя мысль - при добавлении записи в массив строк, добавить новой строке проперти (типа NEW), установить ей класс newRow, и покрасить по этому классу. А снять его по таймауту, который установится через watch у списка.

правильно ли я думаю?

Если строка идет отдельным компонентом, то можно прямо в mounted делать this.isNew = true setTimeout(() => this.isNew = false, 100)

Нет. строка это рендеринг в v-for

и первичный рендеринг таблицы хочется без анимации. а все последующие добавления с анимацией

Нет. строка это рендеринг в v-for

Это не отменяет потенциальную возможность иметь компонент для строки

Но я не настаиваю :)

это да) но как то не хочется)

только если уже без вариантов

Почему же? Твой способ тоже норм, только я не вижу необходимости в watch

Грубо говоря у тебя есть какой-то метод, где строки добавляются, вот в нем и вешай timeout

а..ну как вариант

кстати да.

Единственное, нужно учесть вариант, что ДО истечения таймаута строку могут удалить

кто подскажет, есть как обычно, все нормальные браузеры и IE, дак вот в нем вот такое вот предупреждение, хотелось бы избежать его, никто не встречался с таким? [Vue warn]: Error in created hook: "ReferenceError: "Proxy" не определено"

влепить полифил для Proxy

глянуть можно тут https://github.com/zloirock/core-js

немного боли camel_case underScope

немного боли camel_case underScope

влепить полифил для Proxy

спасибо! попробую

влепить полифил для Proxy

хотя автополифил уже есть

Ой лол

:)

Полифилить прокси невозможно

Привет. Вью выкидывает ошибку когда я пишу такое: v-bind:class="{{ (task.expired) ? 'list-group-item pull-left list-group-item-danger' : 'list-group-item pull-left')}}"

Что делать? в доках так можно

Ошибка компиляции темплейта, invalid expression:

Лишняя закрывающая ")", не?

только что увидел, но и без нее то же самое

Решил, вот так надо: <a :class="(task.expired) ? 'list-group-item pull-left list-group-item-danger' : 'list-group-item pull-left'" :href="task.app_url" target="_blank" style="width: 84%;">{{ task.content }}</a>

безумие

Решил, вот так надо: <a :class="(task.expired) ? 'list-group-item pull-left list-group-item-danger' : 'list-group-item pull-left'" :href="task.app_url" target="_blank" style="width: 84%;">{{ task.content }}</a>

в html такую херню не оставляй пожалуйста

Привет. Вью выкидывает ошибку когда я пишу такое: v-bind:class="{{ (task.expired) ? 'list-group-item pull-left list-group-item-danger' : 'list-group-item pull-left')}}"

Двойныее фигурные скобки вначале Должны быть одинарные

<div v-bind:class="{ active: isActive }"></div>

<a class='list-group-item pull-left' :class='{"list-group-item-danger": task.expired}' :href='task.app_url' target='blank' style v css file zasun blyad> {{ task.content }}</a>

По-моему, тут без тернарок будет куда красивее

По фигурным скобкам странно. Недавно вью изучаю, но в доках не видел одинарных

это байндинг, тут фигурные скобки обозначают обычный объект джаваскриптовый

и пиши нормальные классы

по бэму

По фигурным скобкам странно. Недавно вью изучаю, но в доках не видел одинарных

https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

Круто. Не знал что так можно. Спасибо)

Кто-нибудь может подсказать, как использовать *плагин* внутри компонента? я пытаюсь делать так: import * as Vue from 'vue/dist/vue.common.js'; import PortalVue from 'portal-vue'; // Я подключаю его в приложении, как понял из документации Vue - глобально Vue.use(PortalVue); // прежде, чем импортировать свои компоненты import myCustomComponent from './custom-component/index.js'; И потом просто пытаюсь использовать, ничего дополнительно не делая в самом компоненте: <template> ... <portal to="startOfBodyTag"> </portal> ... </template> Получаю ошибку, Unknown custom element: <portal>. Чую, что-то не так делаю. Но что?

template находится внутри myCustomComponent?

Тогда там и нужо импортировать PortalVue, кмк

Тогда там и нужо импортировать PortalVue, кмк

Ага, он внутри компонента, и я вот тоже думаю, что наверное надо бы как-то его импортировать, вроде того, как это с компонентами делается. import OtherComponent from '../other_component/index.js'; export default { ... components: { 'other-component': OtherComponent, }, } Но это ж блин плагин! Он подключается через Vue.use, а в компоненте у меня нет Vue. Да и если верить докам про плагины - достаточно 1 раз глобально подключить...

хз, с этим компонентом я не сталкивался ранее

хз, с этим компонентом я не сталкивался ранее

Это не компонент) Плагин, а он сам уже регистрирует компоненты... Но спасибо за участие) Буду наверное всё рефакторить, чтобы плагин не в компоненте использовать, а в приложении

Смотри, поиск по гитхабу подсказал демку

https://github.com/kaydwithers/vue-contentful-demo/blob/fcb91cda00b5dd8b31a289187bd5f913f9a7f116/src/main.js

Тут плагин подключается в главном js файле

А потом действительно используется без дополнительного импорта

https://github.com/kaydwithers/vue-contentful-demo/blob/fcb91cda00b5dd8b31a289187bd5f913f9a7f116/src/App.vue

Тут плагин подключается в главном js файле

Странно, вроде как у меня то же самое происходит. Попробую поднять этот пример и разобрать по косточкам. Спасибо ещё раз)

А шо, хлопчики, кто-то юзает TS для Vue? https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

А то вот я не вижу на кой он нужен на фронте

Может кто-то поделится?

Юзается ts либо flow на больших проектах под нескольких разрабов

А так, для себя смысла мало ...

Конкретно для себя я профита никакого не увидел в его приминении ..

почему пропсы компоненты не доступны в момент mounted()?

доступны

props: ['options'], data () { return { form: { items: [] }, } }, mounted() { this.getForm() }, methods: { getForm() { console.log(this.options) }

вот что в консоли

меняю mounted на updated

https://github.com/kaydwithers/vue-contentful-demo/blob/fcb91cda00b5dd8b31a289187bd5f913f9a7f116/src/main.js

Помогло!) Заменил у себя import * as Vue from 'vue/dist/vue.common.js'; На использование алиаса import Vue from 'vue' И сразу всё вылечилось

почему пропсы компоненты не доступны в момент mounted()?

иногда они могут присылаться позднее, чем компонент проходит цикл mounted и из-за этого выходят проблемы

иногда они могут присылаться позднее, чем компонент проходит цикл mounted и из-за этого выходят проблемы

что делать?

Сейчас ..

Ждать их в updated

Хотя вообще то лучше Написать реактивный код

Если проп один то watch поможет

watch на options и в нем вызывать ещё раз метод getForm