всем привет. есть отдельная страница для комментирования поста (backend ларавел), вопрос в том, что можно ли сделать как на рисунке

Создавай vue компонент и опускай данные туда)

Вобщем вот, что я хочу сделать. Чтобы все добавлялось и удалялось без перезагрузки (лайки, новый комментарии). Все это уже работает, но с перезагрузкой страницы

Это несложно сделать, только тебе еще нужно будет прописать в роутах ларавеля API для записи в базу данных, и для удаления. И асинхронно это из Vue все удалять/добавлять. Можно даже позитивно с клиента удалять/добавлять сразу списки не дожидаясь ответа от сервера.

Можно немножко по-подробнее?

В личку сейчас отпишу

есть кто?

чо аву у @yarossl стырил 😆

components не надо пихать в data

шаблон выглядит таким образом, <replies inline-template :replies-data="{!! json_encode($status->replies) !!}" :auth-id="{!! json_encode(Auth::user()->id) !!}"> <div class="media status-reply" v-for="reply in replies"> <a class="pull-left" :href="'/user/' + reply.user.username"> <div class="avatar-parent"> <img class="media-object img-responsive img-circle" :alt="reply.user.username" :src="reply.avatar"> </div> </a> <form v-if="authId === reply.user.id" action="/status/delete" method="post"> {{ csrf_field() }} <button type="submit" class="close pull-right" aria-label="Close"> <span aria-hidden="true">×</span> </button> </form> <div class="media-body"> <h5 class="media-heading">@{{ reply.user.username }}</h5> <p>@{{ reply.body }}</p> <ul class="list-inline"> <li>@{{ reply.created_at }}</li> <li> {{-- <a :href="'/status/like/' + reply.id"><i :class="glyphicon glyphicon-heart{ reply.likes.count() ? '' : '-empty' }"></i></a> @{{ reply.likes.count() ?: '' }} --}} </li> </ul> </div> </div> </replies> app.js выглядит так Vue.component('replies', { props: ['repliesData', 'authId'], data: function () { return { replies: [], authId: [], input: '' } }, }); const app = new Vue({ el: '#app', });` а в консоль выдает ошибки Property or method "replies" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. Property or method "reply" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. Error in render function: "TypeError: Cannot read property 'id' of undefined" TypeError: Cannot read property 'id' of undefined

шаблон выглядит таким образом, <replies inline-template :replies-data="{!! json_encode($status->replies) !!}" :auth-id="{!! json_encode(Auth::user()->id) !!}"> <div class="media status-reply" v-for="reply in replies"> <a class="pull-left" :href="'/user/' + reply.user.username"> <div class="avatar-parent"> <img class="media-object img-responsive img-circle" :alt="reply.user.username" :src="reply.avatar"> </div> </a> <form v-if="authId === reply.user.id" action="/status/delete" method="post"> {{ csrf_field() }} <button type="submit" class="close pull-right" aria-label="Close"> <span aria-hidden="true">×</span> </button> </form> <div class="media-body"> <h5 class="media-heading">@{{ reply.user.username }}</h5> <p>@{{ reply.body }}</p> <ul class="list-inline"> <li>@{{ reply.created_at }}</li> <li> {{-- <a :href="'/status/like/' + reply.id"><i :class="glyphicon glyphicon-heart{ reply.likes.count() ? '' : '-empty' }"></i></a> @{{ reply.likes.count() ?: '' }} --}} </li> </ul> </div> </div> </replies> app.js выглядит так Vue.component('replies', { props: ['repliesData', 'authId'], data: function () { return { replies: [], authId: [], input: '' } }, }); const app = new Vue({ el: '#app', });` а в консоль выдает ошибки Property or method "replies" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. Property or method "reply" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. Error in render function: "TypeError: Cannot read property 'id' of undefined" TypeError: Cannot read property 'id' of undefined

Админы проснулись)

всем привет! может кто-нибудь подсказать как в vue создавать динамически dom элементы по аналогии с document.body.appendChild(element) ? заранее спасибо

через v-for

всем привет! может кто-нибудь подсказать как в vue создавать динамически dom элементы по аналогии с document.body.appendChild(element) ? заранее спасибо

всем привет! может кто-нибудь подсказать как в vue создавать динамически dom элементы по аналогии с document.body.appendChild(element) ? заранее спасибо

Это очень не-вуйно.

Зачем тебе это?

а как вуйно?)

при получении данных с сервера нужно отрисовывать элементы в html и заполнять данными

при получении данных с сервера нужно отрисовывать элементы в html и заполнять данными

Тоже очень интересует как забыть джеквери и поселить в душе вью?

Создаешь компонент и пихаешь в vfor

Эх, а я уж думал кейс интересный. Хотел предложить рендер функции

а если нужны разные компоненты - то отрисовывааешь через v-for components is

Перестать думать о реальном dom'е и начать думать о данных.

Данные это хорошо, но вот заделал я сейчас таскаемый блок. Думаю сделаю круто координаты туда, координаты сюда, потом обработаю из так да сяк, а путь отрисовывеется потом само. А оно что то тормозит 😕 и фпс уж больно проседает.

тут скорее всего твой проеб

Данные это хорошо, но вот заделал я сейчас таскаемый блок. Думаю сделаю круто координаты туда, координаты сюда, потом обработаю из так да сяк, а путь отрисовывеется потом само. А оно что то тормозит 😕 и фпс уж больно проседает.

но вообще закинь в песочницу поиграться

Ребята, кто-то делал placeholder для картинки, пока она не загрузиться на сервер, типо как в телеграме спинер на загрузку файла? Скиньте реализацию, примери, или роскажите как делали такое. Долбаюсь уже 4 час, не знаю как лучше будет(

помогите с vuetify

пример кода можешь залить?