Задать вопрос
Ответы пользователя по тегу Vue.js
  • Как взять переменную в кавычки внутри строки?

    delphinpro
    @delphinpro
    frontend developer
    <TermsConfirm
      :by="`clicking '${name}'`"
    >
    Ответ написан
    Комментировать
  • Как не отображать определенные элементы массива?

    delphinpro
    @delphinpro
    frontend developer
    <div v-for="(league, index) in leagues.countrys"
         v-if="league.strFanart1"
    >
        <h3>{{ league.strLeague }}</h3>
        <h5>{{ league.strFanart1 }}</h5>
    </div>


    Второй вариант:
    computed: {
        leagues() {
          return this.$store.state.leagues.filter(item => !!item.strFanart1);
        }
    },
    Ответ написан
    3 комментария
  • Как правильно подключить локальные шрифты в vue?

    delphinpro
    @delphinpro
    frontend developer
    в каждый url путь подставьте
    сейчас вы только eot подключили

    И уж, коли на Vue пилите, а значит более или менее современные браузеры, то подключайте только woff и woff2 — покроют всё.

    @font-face {
      font-family: 'Geometria';
      src: local('Geometria Thin'), local('Geometria-Thin'),
        url('~@/assets/fonts/geometria/Geometria-Thin.woff2') format('woff2'),
        url('~@/assets/fonts/geometria/Geometria-Thin.woff') format('woff');
      font-weight: 100;
      font-style: normal;
    }
    Ответ написан
    Комментировать
  • Как экспортировать template из файла .vue в index.html?

    delphinpro
    @delphinpro
    frontend developer
    Рендер на стороне сервера (SSR) — вы будете запускать ваш бандл в node среде, и он будет выплевывать готовую наполненную html разметку.

    Второй вариант — Пререндер при сборке (prerender spa). Билд будет рендерить готовые страницы. Этот вариант годится для статичных сайтов.

    В обоих случаях вам не нужно по идее лезть в созданный html.
    Но, чувствую, вам нужно что-то другое. Поясните точнее.

    Возможно вам не требуется делать всю страницу вью-аппликухой. Бывает достаточно делать на нем отдельные блоки/виджеты.

    Еще вариант — сделать-таки всю страницу под вью, подключить полную сборку фреймворка (включающую в себя рантайм-компилятор).
    Тогда, по идее вы можете формировать страницу другими средствами (php) и использовать в ней свои компоненты.
    Ответ написан
    5 комментариев
  • Как добавить/удалить класс по клику на элемент (Vue)?

    delphinpro
    @delphinpro
    frontend developer
    Должен же быть какой-то просто аналог $(this).add/removeClass('active').


    Есть доступ к html элементу:
    this.el.classList.add('active')
    this.el.classList.remove('active')


    Но это вообще неверный подход.

    Отображение во вью должно быть основано на данных.

    Ответ написан
    Комментировать
  • VueJS: где лучше хранить css, в компонентах .vue или main.css?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

    Хочется хранить стили в однофайловых компонентах, при этом имея возможность определить глобально часть sass-переменных, кое-какие миксины и функции. Также нужно как-то подключить миксины сетки и ритма, возможно подключать стили от сторонних пакетов.

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

    Что делаем:
    Подключаем в точке входа (main.js) основной стилевой файл:
    import '@/styles/main.scss';
    import Vue from 'vue';
    //...

    В нем подключаем всякое-разное-глобальное-базовое:
    @import "base/normalize";
    @import "base/init";
    @import "base/typography";
    @import "base/code";
    @import "base/links";
    @import "base/tables";
    @import "base/buttons";
    @import "base/control-group";
    @import "base/general-form";
    @import "parts/transitions";
    ...

    Далаем два файла: env-development.scss и env-production.scss
    $NODE_ENV: development;
    @import "cfg-vars";

    $NODE_ENV: production;
    @import "cfg-vars";

    Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
    Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги
    $DEV_MODE: $NODE_ENV == development;
    $MAX_INT32: 2147483647;
    
    @import "cfg-vrhythm";
    @import "cfg-grid";
    @import "../../../node_modules/vrhythm/source/vrhythm";
    @import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
    @import "../mixins";
    @import "cfg-z-indexes";
    
    $wt-family-base: "Open Sans", sans-serif;
    $wt-family-head: "Roboto Slab", serif;
    $font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
    
    //==
    //== Color palette
    //== ======================================= ==//
    
    $palette-light-blue: #3c8dbc; // Primary
    $palette-red       : #dd4b39; // Danger
    $palette-green     : #00a65a; // Success
    $palette-aqua      : #00c0ef; // Info
    $palette-yellow    : #f39c12; // Warning
    
    ...


    Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
    Идём в vue.config.js и добавляем секцию css:
    const NODE_ENV = process.env.NODE_ENV === 'development'
        ? 'development'
        : 'production';
    //...
    module.exports = {
        //...
        css: {
            extract: NODE_ENV === 'production',
            loaderOptions: {
                sass: {
                    data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
                },
            },
        },
    };


    Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

    Enjoy!
    Ответ написан
    6 комментариев
  • Как исправить двойное подключение файлов?

    delphinpro
    @delphinpro
    frontend developer
    В принципе, Александр Аксентьев вам уже дал исчерпывающий ответ.
    При желании вы можете отключить эти плагины в вебпаке, добавив следующее в vue.config.js:
    {
        ...
        chainWebpack: config => {
            config.plugins.delete('prefetch');
            config.plugins.delete('preload');
        },
        ...
    }
    Ответ написан
    Комментировать
  • Как добавить vendor в dist?

    delphinpro
    @delphinpro
    frontend developer
    Вообще не нужно никаких вендоров копировать. просто подключаете пакеты в свих компонентах и они будут встроены в бандл.
    Лучше настроить code splitting, чтобы вендоры билдились в отдельный чанк:
    5d6297334c35c436103950.png

    Но если приспичило что-то копировать в dist без обработки, то это "что-то" нужно положить в папку public (там изначально лежит шаблон index.html).
    Ответ написан
    3 комментария
  • Не работает Babel on Nuxt (в коде остаются всякие ES6-штуки типа "const") как починить?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Настройте .browserlistrc.
    Let и Const хорошо поддерживаются и в настройке по дефолту, видимо, они допускаются.

    For browser- or Electron-based projects, we recommend using a .browserslistrc file to specify targets. You may already have this configuration file as it is used by many tools in the ecosystem, like autoprefixer, stylelint, eslint-plugin-compat and many others.
    Ответ написан
    4 комментария
  • Как подключить плагин аккордеон без сборщика?

    delphinpro
    @delphinpro
    frontend developer
    Подключите через теги script сам vue.js и дист-сборку плагина https://github.com/phegman/v-show-slide/blob/maste...

    UPD

    Dist там собран неправильно! С флагом development. Работать будет, но лучше пересобрать.

    UPD2

    В принципе там плагин простой, можно онлайн тулзами сделать:
    Здесь https://es6console.com/ транспилируем в es5
    Здесь https://skalman.github.io/UglifyJS-online/ минифицируем
    В результате получаем код

    "use strict";var _createClass=function(){function e(e,i){for(var t=0;t<i.length;t++){var n=i[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(i,t,n){return t&&e(i.prototype,t),n&&e(i,n),i}}();function _classCallCheck(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")}var VShowSlide=function(){function e(){_classCallCheck(this,e),this.easingOptions={builtIn:["linear","ease","ease-in","ease-out","ease-in-out"],custom:{}}}return _createClass(e,[{key:"install",value:function(e,i){this.validateOptions(i),e.directive("show-slide",{bind:this.bind.bind(this),inserted:this.inserted.bind(this),componentUpdated:this.componentUpdated.bind(this)})}},{key:"bind",value:function(e,i){this.parseArgs(e,i)}},{key:"inserted",value:function(e,i){this.initializeTarget(e,i.value)}},{key:"componentUpdated",value:function(e,i){this.toggleSlide(e,i)}},{key:"validateOptions",value:function(e){void 0!==e&&e.hasOwnProperty("customEasing")&&(this.easingOptions.custom=e.customEasing)}},{key:"kebabToCamel",value:function(e){return e.replace(/-([a-z])/g,function(e){return e[1].toUpperCase()})}},{key:"parseArgs",value:function(e,i){if(i.hasOwnProperty("arg")){var t=i.arg.split(":");this.validateEasing(e,t),this.validateDuration(e,t)}else e.duration=300,e.durationInSeconds="0.3s",e.easing="ease"}},{key:"validateEasing",value:function(e,i){i.hasOwnProperty(1)?this.easingOptions.builtIn.includes(i[1])?e.easing=i[1]:this.easingOptions.custom.hasOwnProperty(this.kebabToCamel(i[1]))?e.easing=this.easingOptions.custom[this.kebabToCamel(i[1])]:e.easing="ease":e.easing="ease"}},{key:"validateDuration",value:function(e,i){e.duration=i.hasOwnProperty(0)?parseInt(i[0]):300,e.durationInSeconds=e.duration/1e3+"s"}},{key:"initializeTarget",value:function(e,i){i||(e.style.height="0px"),e.style.overflow="hidden",e.style.transition="height "+e.easing+" "+e.durationInSeconds}},{key:"toggleSlide",value:function(e,i){i.value!==i.oldValue&&(i.value?this.slideOpen(e):this.slideClosed(e))}},{key:"slideOpen",value:function(e){e.isAnimating&&clearTimeout(e.timeout),e.isAnimating=!0;var i=e.scrollHeight;e.style.height=i+"px",e.timeout=setTimeout(function(){e.style.height="auto",e.isAnimating=!1},e.duration)}},{key:"slideClosed",value:function(e){e.isAnimating&&clearTimeout(e.timeout),e.isAnimating=!0;var i=e.scrollHeight;e.style.height=i+"px",setTimeout(function(){e.style.height="0px"},25),e.timeout=setTimeout(function(){e.isAnimating=!1},e.duration)}}]),e}(),vShowSlide=new VShowSlide;

    Который сохраняем себе в файлик, подключаем через script, и используем:

    Vue.use(vShowSlide, {
      customEasing: {
        exampleEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
      }
    });
    Ответ написан
  • Как написать vue для другого id?

    delphinpro
    @delphinpro
    frontend developer
    new Vue({
        el: '#app1',
        //...
    });
    new Vue({
        el: '#app2',
        //...
    });
    new Vue({
        el: '#app3',
        //...
    });
    Ответ написан
    Комментировать
  • Как лучше организовать код стилей во vue, если они переиспользуются, но при этом их нужно немного кастомизировать в каждом компоненте?

    delphinpro
    @delphinpro
    frontend developer
    Глобальное подключение переменных и миксинов можно настроить в конфиге

    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-production.scss";`,
            },
        },
    },
    Ответ написан
    2 комментария
  • Как правильно настроить v-tabs во vuetify.js?

    delphinpro
    @delphinpro
    frontend developer
    Там же пример есть?!

    <v-tabs v-model="active">
      <v-tab v-for="n in 3" :key="n">Item {{ n }}</v-tab>
      <v-tab-item v-for="n in 3" :key="n">
          Любое содержимое 
      </v-tab-item>
    </v-tabs>


    Карточки выводятся в цикле. Для связи используется key, это может быть уникальный идентификатор вкладки или индекс массива.

    В примере, само собой все упрощено, в реальном приложении вы замените цикл на реальные данные. Опять же упрощенно это может выглядеть так:

    data: function(){
      return {
        tabList: [
          {caption: 'Вкладка 1', content: '<h1>Содержимое первой вкладки</h1>'},
          {caption: 'Вкладка 2', content: '<h1>Содержимое второй вкладки</h1>'},
          {caption: 'Вкладка 3', content: '<h1>Содержимое третьей вкладки</h1>'},
        ]
      }
    }


    <v-tab v-for="(tab, index) in tabList" :key="index">Item {{ tab.caption }}</v-tab>
    <v-tab-item v-for="(tab, index) in tabList" :key="index">
      <div v-html="tab.content"></div>
    </v-tab-item>


    конечно, вы не будете в массиве данных содержать разметку, там будут чистые данные, которые могут рендерится в шаблоне прямо на месте, или передаваться в компонент внутри вкладки.

    UPD
    Если ваши вкладки не могут быть заданны массивом, потому что у них кардинально разное содержание, вы можете выводить вкладки без цикла

    <v-tab :key="1">Tab 1</v-tab>
    <v-tab :key="2">Tab 2</v-tab>
    
    <v-tab-item :key="1">Содержимое вкладки 1</v-tab-item>
    <v-tab-item :key="2">Содержимое вкладки 2</v-tab-item>
    Ответ написан
    Комментировать
  • Как правильно вызвать метод компоненты из родителя Vue?

    delphinpro
    @delphinpro
    frontend developer
    Причем здесь пропс itemPass?
    Вы меняете type. Хотя вы его и не описали в списке свойств компонента, но передали по факту и Vue об этом знает.
    Короче говоря, у вас есть пропс type. Пропсы менять нельзя изнутри, а вы меняете. Вот вам и ошибка.

    Меняйте это

    if(this.type == 'password') this.type = 'text'
            else this.type = 'password'


    на генерацию ивентов, снаружи ловите этот ивент и снаружи же меняйте тип.

    АПД

    Либо сделайте так, как предлагает сам Vue в описании ошибки

    Добавьте вычисляемое свойство myType()
    используйте его на инпуте :type="myType"
    и меняйте какой-то внутренний флаг, не трогая внешнее свойство type
    Ответ написан
  • Есть ли возможность инклудить scss и pug миксины в компоненты vue глобально?

    delphinpro
    @delphinpro Куратор тега Sass
    frontend developer
    кусок из моего конфига
    const sassLoaderOptions = {
        outputStyle: 'compressed',
        data       : '@import "./config.scss";',
    };
     {
                    test: /\.scss$/,
                    use : [
                        'style-loader',
                        { loader: 'css-loader', options: cssLoaderOptions },
                        { loader: 'sass-loader', options: sassLoaderOptions },
                    ],
                },
    Ответ написан
  • Как создать проект Laravel + Vuejs + SSR?

    delphinpro
    @delphinpro
    frontend developer
    На ларке пилишь чистый API, на Vue полноценный SPA. Роутинг по сайту делаешь только в клиенте. Для SSR либо ставишь ноду, либо v8js (пример SSR с v8js). Вот и все дела.

    Соответственно первая загрузка была долгой, так как грузила скрипты и стили всех страниц.

    Ну используйте code splitting в вебпаке, чтобы попилить бандл на отдельные чанки.
    Ответ написан
    2 комментария
  • Лучший способ сделать систему SVG иконок?

    delphinpro
    @delphinpro
    frontend developer
    По-моему, оптимальный вариант тот, что повсеместно используется — каждая иконка отдельным компонентом.
    <app-icon-heart/>
    <app-icon-like/>


    Спрайты здесь вряд ли нужны. Код и так собирается в единый бандл.
    Ответ написан
  • Vue.js router - не работают стрелки назад / вперёд в браузере. Как исправить?

    delphinpro
    @delphinpro
    frontend developer
    Вообще-то, vue-router сам всё делает. Ручные манипуляции с историей излишни.
    Ответ написан
  • Возможна ли реинициализация Vuejs на статических данных php?

    delphinpro
    @delphinpro
    frontend developer
    Обычная хотелка при скрещивании php с vue =)
    Я толкаю массив данных в глобальный объект

    Где на странице:

    <script type="text/javascript">
      window.__STATE__ = <?= json_encode($allData) ?>;
    </script>


    В vue компонентах

    created () {
      if (window.__STATE__ && window.__STATE__.myData) {
        this.myData = window.__STATE__.myData;
      } else {
        axios.get( .... )
      }
    }


    При использовании Vuex все еще проще, единственная проверка при инициализации стора.
    Ответ написан
    1 комментарий