• VueJS - как правильно сделать модульный компонент?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    попробуйте
    <template src="./modal.html" lang="html"></template>


    Вообще по оформлению кода есть разные варианты, поскольку "все фломастеры на вкус и цвет разные". Я, например, начинаю делать все в одном файле. Как только объем превышает "один экран", я выношу наиболее объемную часть (шаблон, стиль или скрипт) в отдельный файл. Хотя как раз шаблон, зачатую, остается в самом файле однофайлового компонента (ну, просто это более информативнее, чем выносить его в другой файл).

    P.S.: Может у Вас какой то "линтер" настроен, и из-за этого валяться ошибки?
    Ответ написан
    Комментировать
  • Есть какая-нибудь приблуда на Vue для таблиц?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Официальный перечень всего, что официально есть :)
    Там и таблицы, и прокрутки, и аккордеоны с баянами... Мозгов только нет :(
    Ответ написан
    Комментировать
  • Нужно ли отключать масштабирование системы во время верстки сайта?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Если у Вас в настройках Системы указано масштабирование (вроде правильно написал), то оно влияет только на вашу установленную операционную систему. Просто то, что Вы сверстаете на вашем компьютере будет выглядеть на "25% больше".
    Ответ написан
  • Почему vue-router с дочерним элементом отрабатывает один и тот же компонент?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Родительский компонент будет так же "отработан" при смене роута, как и дочерний - https://router.vuejs.org/ru/guide/essentials/neste...
    Если Вам нужно, чтобы по /events показывался родительский EventPage, а по /events/map/1 только EventMapPage, то нужно изменить настройки роутера:
    const routes = [
      {
        path: '/events/map/:id',
        component: EventMapPage
      },
      {
        path: '/events',
        component: EventPage,
      },
    ];
    Ответ написан
    Комментировать
  • Как передать props в mixin?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Если нужно использовать миксин, то попробуйте так:
    import BImgLaze from 'bootstrap-vue/src/components/image/img-lazy'
    export default {
      name: "b-img-lazy-ex",
      mixins: [BImgLaze],
    }


    Если же хотите именно расширить компонент другим, то надо использовать extends, а не extend.
    Ответ написан
  • Стоит ли изучать nuxt.js?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Лучше использовать vue-cli-3 и плагин @vueneue/ssr.

    В предыдущих проектах использовал Vue Server Renderer, поскольку он более гибкий. В nuxt некоторые вещи сначала жизнь упрощают, а потом реально начинают ее портить. Взять даже тот самый хваленый роутинг на файлах. Я бы понял, если бы он поддерживал все возможности vue-router, но он реально практически все отрезает :( Можно, конечно, отключить это дело или вообще написать свой шаблон формирования роутинга для Nuxt, но зачем же тогда сам Nuxt?

    Дальше планирую пользоваться связкой vue-cli-3 + плагины (в т. ч. указанный выше).
    Ответ написан
    2 комментария
  • Как разобрать данные vk api wall.get через vue?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Не нужно внедрять в шаблон логику данных - нужно передавать данные для отображения.
    Шаблон должен отображать данные - в его сфере знать КАК отобразить, а не ЧТО отобразить.
    Такого быть не должно:
    <a v-else :href="'https://vk.com/wall'+wall.owner_id +'_'+ wall.id">


    Шаблон становится значительно меньше:
    <template>
      <div class="walls">
        <div class="loading" v-if="loading">Loading...</div>
        <div v-if="error" class="error">{{ error }}</div>
        <div class="album py-5 bg-light" v-if="walls">
          <div class="container">
            <div class="row">
              <div class="col-md-4" v-for="({ href, id, img, text }, index) in list" :key="index">
                <div class="card mb-4 shadow-sm">			 
                  <img v-if="img" class="card-img-top" style="height: 225px; width: 100%; display: block;" :src="img">                
                  <div class="card-body">
                    <a :href="href">
                      <p class="card-text">{{ text }}</p>				  				   				   
                    </a>
                    <div class="d-flex justify-content-between align-items-center">      
                      <small class="text-muted">{{ id }}</small> 
                    </div>
                  </div>
                </div>
              </div>
            </div>		  
          </div>
        </div>
      </div>
    </template>


    Логику переносим в код компонента:
    <script>
    import axios from 'axios';
    
    const getUrl = (a, b, URL = 'https://vk.com/wall') => `${URL}${a}_${b}`;
    
    export default {
      data: () => ({
        loading: false,
        walls: null,
        error: null,
      }),
    
      computed: {
        list() {
          const { walls } = this;
          if (!walls) return [];
    
          return walls.map((wall) => {
            const { copy_history } = wall;
            const { attachments, id, owner_id, text } = copy_history && copy_history[0] ? copy_history[0] : wall;
            const href = getUrl(owner_id, id);
            const { photo } = (attachments || []).find(({ type }) => type === 'photo');
            const img = photo ? photo.photo_1280 : false;
            return { href, img, text, id: wall.id };
          };
        },
      },
    
      created() {
        this.fetchData();
      },
    
      methods: {
        async fetchData() {
          this.error = this.walls = null;
          this.loading = true;
          try {
            const { data } = await axios.get('/api/walls');
            this.walls = data.items;
          } catch (error) {
            this.error = error.response.data.message || error.message;
          } finally {
            this.loading = false;
          }
        }
      }
    }
    </script>
    Ответ написан
    Комментировать
  • Как реализовать такое через роуты vue?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Варианта 2:

    1) Подключать нужный компонент шаблона в компонентах страниц. Т. е. в Вашем случае в тех компонентах, что показываются по роутам /register и /login добавить компонент шаблона.
    <template>
      <layout-custom>
        <!-- тут код компонентов -->
      </layout-custom>
    </template>


    Но в этом случае нужно в шаблоне указывать не router-view, а slot.

    2) Сделать через настройки роутера:
    const router = new Router({
      routes: [
        {
          // Без шаблона
          path: '/app',
          component: AppPage,
        },
        {
          // С шаблоном
          path: '/',
          component: LayoutCustom,
          children: [
            {
              path: '/register',
              component: RegisterPage,
            },
            {
              path: '/login',
              component: LoginPage,
            }
          ], 
        },
      ],
    });
    Ответ написан
    Комментировать
  • Как расшарить один и тот же vuex между разными vue объектами?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Просто "расшарьте" между vue-приложениями экземпляр vuex-хранилища.

    import Vue from 'vue';
    import Store from 'vuex';
    
    const store = new Store({ /* настройки хранилища*/});
    
    const app1 = new Vue({
      store,
      el: '#el1',
     /* настройки первого приложения */
    });
    
    const app2 = new Vue({
      store,
      el: '#el2',
     /* настройки второго приложения */
    });
    Ответ написан
    Комментировать
  • Как во VueJS вывести в тег html классы с браузерами?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Мне кажется, лучше по максимуму использовать возможности самого Vue, чем прикручивать к нему библиотеки, которые не нужны.
    Я бы предложил воспользоваться Vue-cli-3, в котором есть автоматическое определение требуемых полифилов, исходя из используемого в приложении кода.
    Ответ написан
    Комментировать
  • Как правильно структурировать свое хранилище vuex?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Вполне можно присвоить null в state.data, просто потом нужно проверять наличие нужных Вам полей в state, например:
    $store.state.data && $store.state.data.city ? $store.state.data.city.name : null

    или отслеживать ошибку
    let cityName;
    try {
      cityName = this.$store.state.data.city.name;
    } catch (e) {
      cityName = null;
    }

    Вариантов, на самом деле, масса. Все зависит от контекста Вашей задачи и архитектуры приложения.
    Ответ написан
    Комментировать
  • Объясните что происходит в этом участке JS кода?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    В этом коде происходит следующее: shop.getProducts запустит мутацию setProducts через 100 мс. Тут создается имитация обращения к удаленному сервису.
    Ответ написан
    Комментировать
  • Как правильно подключить стиль компонента?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Импортировать стили надо там же, где Вы подключаете саму библиотеку. Ни к чему разносить это в разные части кода. Если Вам мозолят глаза расширения .css в js-коде основной программы, то можете сделать отдельный модуль, который будет подключать как саму библиотеку Element-ui, так и стили, а уже этот модуль подключать в свое приложение. А вообще в документации довольно подробно описано как подключать стили, и почему сделано именно так.

    Кстати, а что такое app.scss, и как оно у Вас подключается?

    1) Как вообще правильно подключать стили компонента? Писать style тег во .vue / импортировать из .vue / подгружать вебпапом отдельно в app.scss?


    2) Есть ли какая-то разница между import (default) и require при использовании webpack (laravel mix)?

    Это разные системы модулей - подробнее об этом (и не только) здесь. Советую изучить все материалы из данного учебника - вопросов у Вас будет на много меньше :)
    Ответ написан
    3 комментария
  • Как в vue-cli подключть woocommerce api?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    https://www.npmjs.com/package/woocommerce-api - прямо в названии пакета указано: WooCommerce API - Node.js Client, а Vue-приложение запускается в браузере (и даже после серверного рендеринга), так что напрямую использовать данный клиент вряд ли получится.
    Ответ написан
    Комментировать
  • Vue.js распознавание html тегов в тексте?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Может быть это?
    А, вообще, лучше напишите, зачем Вам это понадобилось.
    Предполагаю, что есть более правильные пути решения проблемы.
    Ответ написан
    Комментировать
  • Почему Vue не даёт использовать директиву if в рендере?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Читаем документацию и видим, что напрямую в render-функции директивы if/model не используются. Здесь больше похоже на React, чем на Angular:

    render: function (h) {
      if (this.List.length <= 5) return h('');
      return h('div', { ... });
    }


    Директива "show" в этом коде работает потому, что show не оперирует узлами DOM, а просто вешает на тег display: none, оставляя сам узел в структуре страницы.
    Ответ написан
    Комментировать
  • Как рендерить содержимое слотов вручную?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    А проще нельзя?

    // parent.vue
    <template>
      <slot name="foo"/>
      <slot name="bar"/>
      <slot name="qux"/>
    </template>
    Ответ написан
    Комментировать
  • Как через v-model можно создать такой объект?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    1) entity[index].name не будет реактивным, т. к. изначально такого значения не существовало, и нужно использовать $set - v-model не подойдет
    2) я бы предложил не смешивать логику, а разнести по разным компонентам: один с полем ввода, который через событие возвращает измененную модель переданную в параметре (по сути это и есть тот "синтаксический сахар", что называется v-model).
    3) повесить событие на компонент с полем и формировать { entity[xxx].yyy } в методе.
    Ответ написан
    Комментировать
  • Как использовать переменные в шаблоне Vue?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Думаю, что проблема в несоответствии версий Vue и плагина https://github.com/Haixing-Hu/vue-i18n.
    Для интернационализации есть более свежие пакеты, например https://kazupon.github.io/vue-i18n/.
    Ответ написан
    Комментировать
  • Как подключить Babel 7 stage 3 во VueJS?

    kleinmaximus
    @kleinmaximus
    Senior Full-stack Javascript Developer
    Как менять настройки webpack

    Выполните vue inspect для вывода конфигурации в консоль или vue inspect > inspect.js для вывода в файл. Можно выводить не полностью, а конкретный узел.

    Используемые версии пакетов можно посмотреть в yarn.lock (package-lock.json) или непосредственно в node_modules.
    Ответ написан
    Комментировать