Подскажите пожалуйста, как лучше реализовать, я чего то застрял. Допустим есть <div> в котором я хочу по клику на пункты меню показывать нужные компоненты. Как это лучше сделать? Можно это сделать через <div is="...."> ?

Наверное лучше добавить булевые свойства в дату, и менять их по клику, и те элементы которые ты хочешь прятать или отображать через v-if="здесь твое булевое свойство"

Если я тебя правильно понял

Наверное лучше добавить булевые свойства в дату, и менять их по клику, и те элементы которые ты хочешь прятать или отображать через v-if="здесь твое булевое свойство"

Я просто хотел чтобы у меня по клику на элементы сайд бара, а их там штук 7-8 оторажались в div справа разные формы, относящиеся к этим элементам меню. То есть для каждого элемента делать булевское свойство? кажется как то громоздко. Наверное это можно как то с помощью роутера сделать, но роутер у меня используется для глобальное навигации..

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

а то все мои знакомые фигачат компоненты в виде объектов как в доке написано

но мне объекты кажутся менее читаемыми чем классы

Я такой хотел подход хотел использовать

из-за наследования

как в реакте

Да

ну вот я и на реакте пишу и на vue

Я просто на работе на реакте пишу

только как в компании так писать, где все пишут как в доке

vue во многих моментах мне нравится побольше даже, но очень уж я против всяких nextTick

Дело вкуса, мне кажется здесь минус только в том что это не по стандарту(не как все тоесть)

Подскажите пожалуйста, как лучше реализовать, я чего то застрял. Допустим есть <div> в котором я хочу по клику на пункты меню показывать нужные компоненты. Как это лучше сделать? Можно это сделать через <div is="...."> ?

<component :is=“nameComponent”/>

Всём привет, кто нибудь делал transition внутри дочернего компонента, если просто его писать - не работает ?

Всём привет, кто нибудь делал transition внутри дочернего компонента, если просто его писать - не работает ?

покажи код

скорее всего параметры неверно заданы

есть же <transition> а есть «transition-group>

Ок, сейчас скину

<component :is=“nameComponent”/>

О, спасибо! То что надо :)

Господа, а какой цымес во вьюексе методы через констансты обьявлять?

скорее всего параметры неверно заданы

App.vue <template> <div id="app"> <router-view class="view"></router-view> </div> </template> Index.vue <template> <header-component></header-component> <transition name="fade" mode="out-in"> <div class="content" id="content"> <content-component :content="content"></content-component> <div class="buffer"></div> </div> </transition> <footer-component></footer-component> </template> <style> .fade-enter-active, .fade-leave-active { transition: all 0.4s ease; } .fade-enter, .fade-leave-active { opacity: 0; } </style>

Почитав рекомендации капец дофига пришлось исправить в проекте))

проще добавить ESLint с правилами для вью файлов. Быстро найдет что не соответствует стайл гайду, а часть из этого даже уже автоматически исправить может

Господа, а какой цымес во вьюексе методы через констансты обьявлять?

linter-ы и IDE чтобы видели ошибки

App.vue <template> <div id="app"> <router-view class="view"></router-view> </div> </template> Index.vue <template> <header-component></header-component> <transition name="fade" mode="out-in"> <div class="content" id="content"> <content-component :content="content"></content-component> <div class="buffer"></div> </div> </transition> <footer-component></footer-component> </template> <style> .fade-enter-active, .fade-leave-active { transition: all 0.4s ease; } .fade-enter, .fade-leave-active { opacity: 0; } </style>

попробуй добавь свойство appear в транзишин

.fade-enter, .fade-leave-to { opacity: 0; }

linter-ы и IDE чтобы видели ошибки

хм ... типа что модна промазать и сделать опечатку например this.$store.dispatch('authLogon') ?

хм ... типа что модна промазать и сделать опечатку например this.$store.dispatch('authLogon') ?

не можно, а рано или поздно такая опечатка будет

но тогда же консоль ругнеться, и как бы ошибка будет сразу показана?

и если нет тестов адекватных, то пользователь тебе потом об этой ошибке расскажет :)))

а почему консоль должна ругаться на диспатч?

хотя надо проверить, но в реакте точно не будет ругаться :))

ведь экшин это plain object

в любом случае это уже будет ошибка runtime

ну таки ругается

но логика теперь понятна

хотя тащить за собой вагон констант как-то не очень удобно

а ты мапишь экшины через mapActions?

просто попробуй не мапить и не указывать namespace

или мапить без указания namespace

просто попробуй не мапить и не указывать namespace

так ведь кайф от разбиения на модули пропадает же

ну бывают же экшины глобальный

которые должны пройти сквозь все твои модули

какой-нибудь resetState

я вообще не маплю, как бы ради у меня мелкие формы, там только пару екшинов

когда ты хочешь обнулить все дерево стейтов одним вызовом

попробуй добавь свойство appear в транзишин

спасибо огромное!

спасибо огромное!

заработало?

когда ты хочешь обнулить все дерево стейтов одним вызовом

а если это не глобальный, а в каком-то модуле, то тогда вместо this.$store.dispatch( 'auth/signIn', { email, password } ) нужно this.$store.dispatch( auth/${ SIGN_IN}, { email, password } )

как-то так вообще нечитаемо

нет ну так точно не делают

определяешь строковые константы, экспортируешь их там где нужно их юзать делаешь import * as authActions from 'blabla'

и используешь уже auth.SING_IN

1. любая норм IDE тебе автокомплит покажет на auth.

2. глубокий анализ покажет если опечатался

заработало?

да

определяешь строковые константы, экспортируешь их там где нужно их юзать делаешь import * as authActions from 'blabla'

хм ... то получается один файлик импорта констант только для одного модуля Vuex?

если без мапинга в объекте компонента, то { [auth.SING_IN]: () => {...} }

хм ... то получается один файлик импорта констант только для одного модуля Vuex?

это везде по разному

есть экшины специфичные только для конкретного модуля

а есть глобальные

например летит такой экшин resetState

если он у тебя в модуле определен, то он вызовется

если нет, то нет

ок, а какое значение тогда будет у SING_IN, когда в модуле вюкса должно быть SING_IN = 'sign_in', а уже в комоненте будет SING_IN = 'auth/sign_in'

это только если маппать с найспейсам тогда будет одно значение

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

а то может когда на пальцах, то я сути не уловил, а в примере все будет ясно )))

тебе просто надо в компоненте мапить экшины

через mapActions('yourModuleName', [auth.SIGN_IN, auth.SIGN_OUT])

а сами экшины определять как actions: { async [auth.SIGN_IN]() { await ... }, [auth.SIGN_OUT]() { ... } }

типа такого паттерна

Все, бот должен работать збс, осталось пагинацию на сайте зафискить

я пулреквест закрыл, могу еще раз закинуть

Всем привет. Уважаемые, подскажите пожалуйста, есть ли какой-то JS пакет с помощью которого я могу открыть пдф файл, получить номер текущей страницы и при открытии передать номер страницы, которую необходимо открыть.

Всем привет. Уважаемые, подскажите пожалуйста, есть ли какой-то JS пакет с помощью которого я могу открыть пдф файл, получить номер текущей страницы и при открытии передать номер страницы, которую необходимо открыть.

http://mozilla.github.io/pdf.js/getting_started/

Спс

Ребят привет, посдкажите как сделать транзишен контента компоненты?

не между компонентами

Всем привет. У кого-нибудь был такой case?

а в чем case?)

В отображении иконки)

Стоит Webpack, Vue,Vuetify

<template> <div> <fetch-data /> <v-btn color="error" fab large dark> <v-icon>alarm</v-icon> </v-btn> </div> </template> <script src="./home.ts"></script>

собственнно так выглядит шаблон

собирал проект не сам, пытаюсь найти косяк)

С подключением вроде всё ок. import Vue from "vue"; import VueRouter from "vue-router"; import Vuetify from "vuetify"; import Axios from "axios"; import "./types/vue-global"; import { routes } from "./routes"; import { ApiEndpoints } from "./api"; import "vuetify/dist/vuetify.min.css"; import "material-design-icons/iconfont/material-icons.css"; import "./css/site.css"; Vue.use((VueRouter) as any); Vue.use(Vuetify); Vue.prototype.$http = Axios; Vue.prototype.$apiEndpoints = new ApiEndpoints(); const vue = new Vue({ el: "#app-root", router: new VueRouter({ mode: "history", routes: routes }), render: h => (...) });

я пулреквест закрыл, могу еще раз закинуть

Там надо что б Рей свой чуть допилил

Там надо что б Рей свой чуть допилил

короч разрулишь

я закинул пусть будет