Ответы пользователя по тегу Vue.js
  • Почему рекомендуют использовать Vuex как прослойку для работы с API (через axios)?

    Vadiok
    @Vadiok
    Веб разработчик
    Не знаю, зачем так делают, но предположу, чтобы иметь относительно одинаковый вариант получения данных, независимо от компонентов. Если с сервера запрашиваются данные об авторизированном пользователе или еще что-то, что не подразумевает изменения в зависимости от параметров запроса, то наверное логично делать это через экшны стора. Но вот списки, которые подразумевают фильтрацию и пагинацию вообще только проблемы создают. Например, компонент берет список из стора и отображает его. Потом мне понадобилось в попапе те же сущности вывести, но с другой фильтрацией - все - список первого компонента затерся вторым. Так что с такой практикой надо очень аккуратно.
    У нас на работе изначально пошли по пути данных в сторе, потом это выпилили.
    Еще минус в том, что данные с сервера в сторе реактивные, хотя для данных, полученных с сервера это обычно не требуется и влияет негативно на производительность. В случае использования composition api такие данные лучше хранить в shallowRef сущности и обновлять ее целиком при получении новых.
    Ответ написан
    Комментировать
  • Как во vue 3 сделать только рендер компонентов, без замены рут элемента?

    Vadiok
    @Vadiok
    Веб разработчик
    Да, возможно:
    import { createApp } from 'vue';
    
    createApp({
      components: {
        // Список компонентов, которые могут использоваться в шаблоне 
      },
    })
      .use(store)
      .mount('#app');


    Единственный момент - необходимо использовать при подключении сборку, которая поддерживает парсинг шаблонов. По умолчанию используется меньшая по размеру сборка без этой возможности, а за парсинг шаблонов отвечает vue-loader.

    Чтобы код выше работал можно подправить либо импорт на 'vue/dist/vue.esm-bundler.js'', либо добавить во vue.config.js секцию:

    const buildConfig = {
      // Может быть что-то выше
      configureWebpack: {
        resolve: {
          alias: {
            vue$: 'vue/dist/vue.esm-bundler.js',
          },
        },
      },
      // Может еще что-то
    };
    
    module.exports = buildConfig;
    Ответ написан
    2 комментария
  • Как сделать закрути модального окна вне кнопки?

    Vadiok
    @Vadiok
    Веб разработчик
    Обычно это делают по клику на оверлее, у вас в примере это <div class="modal-mask">
    Ответ написан
  • Как создавать вобъект в массиве, при клике на чекбокс?

    Vadiok
    @Vadiok
    Веб разработчик
    <input
             type="checkbox"
             v-model="filters"
             :value='{filterId: 5, value: "someValue"}'
      >
    Ответ написан
    Комментировать
  • Как вызвать сторонний метод\функцию?

    Vadiok
    @Vadiok
    Веб разработчик
    Конкретно так сделать нельзя.
    Можно сделать глобальный миксин, хотя так делать тоже не очень красиво:
    const windowMixin = {
      methods: {
        getWindow() {
            return window;
        }
      }
    }
    
    new Vue({
      mixins: [windowMixin],
      // Прочий код
    })


    Далее в шаблоне можно использовать getWindow().alert('12345') и др. методы объекта window/
    Ответ написан
    Комментировать
  • Конфликт Jinja2 и Vue.js с фигурными скобками. Как исправить?

    Vadiok
    @Vadiok
    Веб разработчик
    Обычно переменные Vue и переменные бэкенда не встречаются совсем уж рядом, поэтому можно Vue блоки выделять в "raw" блоки, в которых не идет обработка синтаксиса Jinja:
    <h1>{{ JinjaVariable }}</h1>
    {% raw %}
        <div>
            {{ VueJsVariable }}
        </div>
    {% endraw %}
    Ответ написан
    Комментировать