у меня форма генерируется динамически из разных блоков (Цитата, Текст, Галерея...)

то есть можно добавлять блок за блоком в любом порядке в любых количествах

сейчас у меня все шаблоны хранятся в html и сервер рендерит и возвращает нужный шаблон по имени блока

не пойму как сделать это на стороне vue

тем более в форме должны использоваться данные с сервера

например есть блок "Заведение", где в форме используется инпут селект с выбором заведения из базы

Vue умеет компилировать шаблоны в рантайме. Может все таки пойти по этому пути?

Ой, а расскажите пожалуйста, где посмотреть в доке? Задача довольно типовая, часто возникает необходимость

или типа каждый блок делать vue компонентом?

фига вы матерые, я только про рантайм и знаю 😆

@ezhkov так собственно https://vuejs.org/v2/guide/components.html

Vue.component('my-component', { template: '<div>A custom component!</div>' })

это оно и есть

Эммм... Выглядит костыльно))

можно же в любом месте кода сказать Vue.component. Там только потом надо его как динамический прокидывать

@ezhkov Компиляция шаблонов в рантайме - само по себе костыль

Ну в принципе, да. Просто душа не принимает разметку в JS

это не разметка, там можно "обычный" хтмл

Но если асинхронно тянуть HTML, то вроде и не в JS разметка уже

ну, в случае с @perin например разметка с сервера прилетала бы, так что в js-коде ее не видно. Но все это, повторюсь, сорта костылей

например есть блок "Заведение", где в форме используется инпут селект с выбором заведения из базы

Возвращайте список ошибок Напишите свою валидацию на фронте

это не разметка, там можно "обычный" хтмл

HTML внутри JS выглядит хреново. Я поэтому React с его JSX не перевариваю

.vue гораздо более изящная концепция

Или же возвращайте заново html с ошибками

Возвращайте список ошибок Напишите свою валидацию на фронте

список ошибок то понятно, там просто некрасиво будет. Смотри, у меня несколько блоков добавляются, и например есть 3 блока Галерея, и если в разных из них есть разные ошибки, то как то в списке будет нифига не понятно

хтмл внутри хтмл:) на то и рантайм компиляция. Vue видит в хтмл коде в своем указанном элементе свои теги и компилирует

.vue гораздо более изящная концепция

оргазмичная концепция )))

Или же возвращайте заново html с ошибками

вот так можно подумать

вот так можно подумать

А тут и думать не нужно. У вас же не рест

Вы оперируете шаблонами

Потому и работайте с ними

ну вот я и думаю может пока не поздно переделать на vue компоненты чтоб не шаблонами оперировать

только я в vue компонентах еще не шарю)

@perin да, так будет правильнее

HTML внутри JS выглядит хреново. Я поэтому React с его JSX не перевариваю

https://jsfiddle.net/50wL7mdz/78104/

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

https://jsfiddle.net/50wL7mdz/78104/

Ну это ж типовое использование.

https://coligo.io/dynamic-components-in-vuejs/

ну так и где тут хтмл в жс?

ну так и где тут хтмл в жс?

Я говорю про случай, когда создают компоненты, где в поле template пишут не ID шаблона, а прям HTML-разметку

Как в примере из документации

я наверн чего-то не понимаю, но что мешает подставить нужный ид на стороне сервера?

или тут вообще случай когда шаблоны не возможны?

Разговор идет о рантайм-компиляции компонентов.

Грубо говоря, нажали кнопку на странице, у вас сгенерировался новый компонент

Vue.component('my-component', { template: "<div v-text='token'></div>", props: ['token'], }) я хочу вывести token из data Vue в компонент, но чот не выводится... как его пробрасывать в компонент?

Ладно, проехали, решение было предложено

Vue.component('my-component', { template: "<div v-text='token'></div>", props: ['token'], }) я хочу вывести token из data Vue в компонент, но чот не выводится... как его пробрасывать в компонент?

<my-component token="token">

если конечно есть data.token

во, благодарочка

дада, есть)

Потому что вложенный роут открывается во вложенном в родительском компоненте router-view

Спасибо!

Привет! Знаете какой нибудь колор пикер для вью помимо https://github.com/xiaokaike/vue-color ?

Привет! Знаете какой нибудь колор пикер для вью помимо https://github.com/xiaokaike/vue-color ?

Я в проекте вот такой использую https://www.npmjs.com/package/vue-bootstrap-colorpicker

Ой, а расскажите пожалуйста, где посмотреть в доке? Задача довольно типовая, часто возникает необходимость

https://vuejs.org/v2/api/#Vue-compile

Но лучше так стараться не делать

Но лучше так стараться не делать

Спасибо, буду иметь в виду)

нет,чтото не то с компонентом у меня

Vue.component('my-component', { template: "<div v-text='token'></div>", props: ['token'], }) <my-component token="token"></my-component>

выводит просто текст "token"

а, всё

<my-component v-bind:token="token"></my-component>

<my-component v-bind:token="token"></my-component>

можно без v-bind просто :token="token"

ага, я пока просто разбираюсь

спасибо

<script type="text/x-template" id="checkbox-template"> <select class="form-control"> <option v-for="org in orgs" :value="org.id"> @{{ org.name }} </option> </select> </script> <script type="text/javascript"> Vue.component('test', { template: '#checkbox-template', data() { return { orgs: ......, } }, }); ..... </script>

сделал тестовый компонент, получаю список организаций и вывожу их в селект, всё работает норм

но самое главное теперь, как мне этот компонент вставлять динамически в шаблон?

и как связывать данные из компонента с моделью в vue data ...

Гайс, такой вопрос Есть iScroll компонента, которая делает красивый скролл https://dafrok.github.io/vue-iscroll-view/ Как правильно сделать роутер что бы на каждой странице был этот скрол? <iscroll-view ref="iscroll" :scrollerStyle="{color: 'red'}" class="scroll-view"> <transition mode="out-in" v-on:enter="animEnter" v-on:leave="animLeave"> <router-view></router-view> </transition> </iscroll-view> Если делать так, то после каждого перехода нужно вызывать метод this.$refs.iscroll.refresh() для того что бы iscroll пересчитал высоту контента внутри себя. Но я не могу это сделать т.к. внутри новой страницы нет this.$refs.iscroll. Если делать так, то как мне достучатся до этого рефреша? Прокидывать его внутрь компонент?

#whois работаю php разработчиком в Киеве. Интересен сам Vue. Кинули ссыль в другом чате

Неужели эпоха moment.js закончилась

Luxon, современная замена moment.js для работы с датами и временем: иммутабельная, с простым API и нативной поддержкой локализации — http://moment.github.io/luxon/

....

я так понимаю

рофлить про жс можно бесконечно

ладно, пойду писать новую библиотеку для работы со временем, на основе Luxon

зачем новую, переписывать старую с момента

ctrl-h и погнали

Luxon, современная замена moment.js для работы с датами и временем: иммутабельная, с простым API и нативной поддержкой локализации — http://moment.github.io/luxon/

тут есть locale('ru') ?

пока не знаю :) подробно ещё не смотрел