Ответы пользователя по тегу Vue.js
  • Как в vue перенаправить на страницу 404 если сервер вернул 404?

    @kicker1337
    ajaxProductsbyCategoryFromDB(context,category){
                axios.get("/api/products/"+category).then(responce =>{
                    context.commit('setProducts',responce.data.products)
                })
                .catch((error) => {
                  // Проверка на код ошибки
                  if (error.response.status === 404) {
                    // Перенаправление на именованный роут
                    router.push({ name: '404' })
                  }
                })
            }
    Ответ написан
    Комментировать
  • Как вызвать функцию из methods в created?

    @kicker1337
    Попробуйте вот так:

    created () {
          this.connection = new WebSocket("ws://127.0.0.1:8000/ws/chat/")
    
          this.connection.onmessage = event => {
            let receivedMessage = JSON.parse(event.data).message;
            this.receiveMessage(receivedMessage)
          }
          this.connection.onopen = function(event) {
            return event
          }
    
        },


    Я изменил код

    this.connection.onmessage = event => {

    чтобы была стрелочная функция, `this` в этой функции будет указывать на нужный контекст (метода created).

    Ещё я заменил created: function() { на сокращённую форму created () {
    Ответ написан
    Комментировать
  • Стоит ли изучать nuxt.js?

    @kicker1337
    Работал с Nuxt в сумме примерно в течение года. Написал свой блог на нем (довольно большой), вот он на гитхабе: https://github.com/iliyaZelenko/blog-frontend

    Недостатки которые заметил:

    1) Он долго запускается при `nuxt dev` (мой блог запускается за 3-5 минут) и HMR обновляется в среднем 1-5 секунд (порой и дольше), даже если обновил просто template. Это больше всего напрягает.

    2) После изменения кода, иногда папка `.nuxt` генерируется с ошибкой, приходится менять любую строчку в исходниках проекта чтобы опять запустить генерацию или порой полностью перезапускать Nuxt. Такая проблема была замечена не на всех проектах.

    3) Бывает проблематично использовать модули которые не идут сразу на сервере и на клиенте, но это больше проблема SSR. Еще порой хочется получить сам nuxt контекст где store, router, плагины, но это нельзя сделать в некоторых местах, обычно эта проблема на клиенте. Например, на клиенте в store где state еще нет свойства window.$nuxt, нельзя обратится к плагину универсальных куков cookie-universal-nuxt и взять из куков значение и записать в state, а по другому к контексту nuxt не обратится. Store тяжело получить в самом store, порой это нужно.

    4) Когда с ним использовал TypeScript, то иногда nuxt выдавал что типа (обычно интерфейса) не существует или другие ошибки типов, но этих ошибок на самом деле не было. Единственный выход — заново запускать nuxt dev и долго ждать, порой эта проблема возникала по несколько раз в течении 20 минут, приходилось перезапускать несколько раз.

    В моем блоге мне почти всегда нужно было Dependecy Injection чтобы внедрять разные модули, но они были не доступны в `asyncData`, там нет this, пришлось получать прямо из контейнера. Пример кода:

    const CategoryRepository = serviceContainer.get<CategoryRepositoryInterface>(TYPES.CategoryRepositoryInterface)


    Взят от сюда.

    Вообще вместе с vue-class-component нельзя использовать конструктор чтобы внедрять там зависимости, я использовал inversify для DI, но чтобы оно работало vue-class-component пришлось использовать костыль с vue-inversify-decorator (костыльный способ от разработчиков vue-class-component исправить эту проблему), писать `@Provide(container)` в layouts/default.vue (лучшего места не нашел к сожалениию, это тоже минус). Как было бы удобно если внедрил зависимости в конструктор и они сразу есть во всем компоненте и в `asyncData`.

    Хочу изучить next (react) чтобы было с чем сравнить.
    Ответ написан
    2 комментария
  • Empty tag doesn't work in some browsers (Vue, Jetbrains)?

    @kicker1337
    Это из-за того что тег не закрытый, в вашем случае:

    <textarea v-model="data.value" />

    можно заменить на:

    <textarea v-model="data.value"></textarea>

    и предупреждение исчезнет.

    Но так вы не будете пользоваться классной возможностью Vue файлов, которая позволяет делать теги пустыми.

    Обходной путь для PHPStrom / WebStrom:

    1) Откройте это меню (например, Ctrl + A и там в вкладке All введите сообщение ошибки)

    5peSsyG.png2) Справа, там где select для Severity (строгость), выберите такой вариант:

    YHYZ8A7.png
    Ответ написан
    Комментировать
  • Как скомпилировать .vue компоненты в отдельные .js файлы?

    @kicker1337
    Можете разделить компоненты по папочкам, так:

    resources
        js
            components
                ContactForm
                    index.js
                    component.vue
                OrderForm.vue
                    index.js
                    component.vue


    Потом внутри каждого index.js:

    import component from './component.vue'
    
    // регистрирует глобальный компонент
    Vue.component('имя компонента', component);


    Подключать так:

    <script src="{{ mix('js/components/ContactForm/index.js` }}"></script>


    возможно и так будет работать:

    <script src="{{ mix('js/components/ContactForm` }}"></script>


    Думаю будет работать.

    И пусть это будет в конце всех скриптов:

    <script src="{{ mix('js/app.js` }}"></script>
    Ответ написан