Задать вопрос
Vadiok

Влад Токарев

Веб разработчик
Ответы пользователя по тегу 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 комментария
    2 комментария

  • Как сделать закрути модального окна вне кнопки?

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

  • Как создавать вобъект в массиве, при клике на чекбокс?

    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 %}
    Ответ написан
    Комментировать
    Комментировать