Задать вопрос
  • Как в общих чертах реализовать фоновую загрузку файлов?

    @null_object
    privat13, от фреймворка это не зависит, в целом есть несколько способов загружать файлы:
    1) Самый простой, с заголовком Content-Type: multipart/form-data. Для этого нужно файлы собрать в объект FormData, а затем оправить через fetch, либо XMLHttpRequest. При таком решении прогресс получится отслеживать только на XMLHttpRequest.
    2. Более сложный, через стримы. Любым способом формируете объект ReadableStream, затем отправляете через fetch с опцией duplex: "half" (работает с Chrome > 105). В этом случае можно отслеживать сколько было считано из стрима.

    В вашем случае скорее всего подойдет любой из способов, однако если файл большой, то обычно его на клиенте разбивают на чанки, а потом на строне бэкенда склеивают обратно. Например так:
    function* makeChunks(data: Blob, chunkSize: number) {
      let offset = 0;
    
      chunkSize = Math.max(Math.min(chunkSize, data.size), 1);
    
      while (offset < data.size) {
        const chunkIndex = offset / chunkSize;
        const nextOffset = Math.min(offset + chunkSize, data.size);
    
        const chunk = data.slice(offset, nextOffset);
    
        yield {
          start: offset,
          end: nextOffset,
          total: data.size,
          index: chunkIndex,
          payload: chunk,
        }
    
        offset += chunkSize;
      }
    }
    Написано
  • Как запустить проект в prod режиме nuxt 3?

    @null_object
    Исправить что? На localhost:3000 все должно открываться, а формат записи такой, потому что сервер запускается на адресе 0.0.0.0
    Написано
  • Как в Nuxt 3 через Tiptap редактор загружать картинки из файловой системы?

    @null_object
    Согласен с Aetae. Можно посмотреть в сторону Editor.js, когда-то использовал - понравилось. Много разных плагинов есть, в т.ч. с изображениями, который вам и нужен.
    Написано
  • Почему значение в composables не реактивно?

    @null_object
    Jussss92, если нужно прокинуть состояние между компонентами, то все же лучше сделать это через один из других вариантов: props, provide/inject, pinia
    Написано
  • Почему значение в composables не реактивно?

    @null_object
    Jussss92, не совсем, из документации
    In the context of Vue applications, a "composable" is a function that leverages Vue's Composition API to encapsulate and reuse stateful logic.

    Их придумали для удобного переиспользования кода, использующего реактивные примитивы, а вы пытаетесь использовать это для глобального состояния. В принципе, так можно делать, но работать это будет не везде, например с SSR от этого будет течь память. Если у вас просто SPA, то достаточно вынести ref из функции
    import { ref } from 'vue'
    
    const totalActive = ref(0)
    
    export default function useVariablesSelectedMenu() {
    	// Функция для обновления переменной
    	const setColumnActivePages = (newValue: number) => {
    		totalActive.value++
    	}
    
    	return {
    		setColumnActivePages,
    		totalActive,
    	}
    }
    Написано
  • Почему значение в composables не реактивно?

    @null_object
    То есть вы в одном компоненте изменяете значение, а в другом хотите следить за изменениями?
    Написано
  • Как сделать горизонтальный виртуальный скролл?

    @null_object Автор вопроса
    Использую Vue, просто упростил для примера, про виртуальный скролл я думал, но я не знаю заранее размеры элементов. Заголовки, параграфы, изображения - все это отдельные компоненты (на скриншотах в вопросе). + задача осложняется отображением колонками.

    P.S. посмотрел API у TanStack, вроде можно задать даже колонки, спасибо попробую
    Написано
  • Как лучше переписать условие?

    @null_object
    Можно вынести в константу, но короче от этого не станет, в JSX/TSX только так)

    export const Footer = (props?: IFooterProps) => {
        const body = props?.button ? (
          <>
            <RNHoleView style={styles.background} holes={[hole]}>
              <View style={styles.maskBorder}></View>
            </RNHoleView>
            {props.button}
          </>
        ) : (
          <View style={styles.background}></View>
        );
    
        return (
          <View style={styles.container}>
            {body}
          </View>
        );
    };
    Написано
  • Можно ли написать такой тип проще?

    @null_object Автор вопроса
    Ключевой вопрос: а надо ли это всё вообще? Почему бы просто темплейт стринг не использовать и вставлять значения сразу? Без этих костылей.

    Часто в i18n используют, для меня просто интересная задача.

    В любом случае WbICHA, Alexandroppolus спасибо за тест кейсы, придумал как сделать лучше
    Написано
  • Можно ли написать такой тип проще?

    @null_object Автор вопроса
    Alexandroppolus, делаю функцию для подстановки значений в шаблон, условно
    template('Hello, {user.name}', { user: { name: 'Bob' } });

    Хочу сделать проверку объекта во втором аргументе.

    Сами плейсхолдеры достаются регуляркой и тут важно достать только вложенный шаблон на любой глубине

    Пример
    Написано
  • В Nuxt 3 useFetch() вызывает ошибку Vue Router в Docker?

    @null_object
    Айжарык, это уже другая проблема, не связанная с первой. Она в репозитории nitro еще не закрыта. Чтобы ее решить, можно попробовать добавить в volumes папку .nuxt, которую накст генерирует в dev режиме, либо запускать контейнеры с флагом docker compose up --force-recreate. Вам точно нужен dev режим в контейнере?
    Написано
  • В Nuxt 3 useFetch() вызывает ошибку Vue Router в Docker?

    @null_object
    Если ругается Vue Router, значит запросы к api попадают не на бэкенд, а на ваше nuxt приложение, ну и соответственно таких роутов не находит, посмотрите куда уходят запросы useFetch, может дело в прокси, раз проблема возникает в контейнере
    Написано
  • Nuxt Supabase Как решить ошибку 500 "client.from is not a function"?

    @null_object
    pshavlenkov, точно не подскажу, но вроде проблема может быть в RLS, которые по-умолчанию включены. Этот механизм позволяет ограничивать доступ на операции с таблицами по некоторым правилам, например разрешать доступ только аутентифицированным пользователям. Попробуйте либо отключить его для ваших таблиц, либо настроить правила6608668709627037049026.png
    Написано
  • Как сформировать SQL запрос?

    @null_object Автор вопроса
    ORM случайно не обладает соответствующей функциональностью?

    Там довольно простая обертка над обычным sql, насколько я понимаю. Есть пример запроса M2M, но у меня более сложный запрос, без подзапроса, как написали ниже, видимо не обойтись.
    Написано
  • Почему Webview не отображает веб-страницы?

    @null_object
    Эвотор проксирует все запросы через свое облако, в документации они предлагают настроить список разрешенных доменов - https://developer.evotor.ru/docs/doc_java_third_pa..., но это не распространяется на локальную сеть. Возможно причина в этом
    Написано
  • Как правильно настроить refetch watch?

    @null_object
    Soer44, К сожалению, это не отвечает на вопрос почему страница обновляется, из вашего кода я не увидел причину, по которой это могло бы происходить. Тут я уже ничем не помогу, только дебаг, console.log и все такое. Свой вариант решения я предложил, он должен работать.

    А лучший учитель - документация, тем более, что понятнее документации, чем у vue, еще нужно поискать)
    Написано
  • Как правильно настроить refetch watch?

    @null_object
    Soer44,
    В вашем примере объявлен useFetch, который делает запрос на удаление и возвращает реактивную переменную с результатом запроса, ошибкой, и функций, которая повторно выполнит этот запрос
    const deleteBook = async () => {
      const bookId = selectedBook.value.id;
      const token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIwY2Y5Nzk0Yi1jYjczLTcyQ";
      const { data, error, refresh } = await useFetch<{ results: Book[] }>(
        `https://api.storage/${bookId}`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
          method: "delete",
          server: false,
        }
      );
      if (error.value){
        console.error(error.value)
      } else {
        isBookDeleted.value = true;
        showBookDetails.value = false;
      }
      refresh();
    };

    На последней строке вы как раз и повторно вызываете удаление книги.
    Написано
  • Как правильно настроить refetch watch?

    @null_object
    Soer44, как это не повторный запрос? Вызов refresh просто заново делает запрос на ваш эндпоинт и перезаписывает содержимое data
    Написано