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

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Сделать вычисляемое свойство в компоненте, в котором нужно выводить информацию, где будет подсчитываться через reduce количество элементов.

    <span>
      {{ productsCount }}
    </span>


    computed: {
      productsCount() {
        return this.checkedInput.reduce((acc, i) => { acc+= i.products.length; return acc }, 0)
      }
    }
    Ответ написан
    Комментировать
  • Как установить булево значение через computed?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    - forEach
    + some


    const isFilled = computed(() => {
      Object.entries(names.val).some(([, val]) => val.inputVal)
    })
    Ответ написан
    Комментировать
  • Как сгенерировать статическую страницу для печати через vuejs?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    function createPrintPage(htmlString) {
        const w = window.open('print-me', '_blank')
        w.document.write(htmlString)
    }
    
    createPrintPage('<h1>Print me title</h1>')

    ?

    Ну или определить для роута, который предназначен для печати, отдельный layout, в котором не будет подключен header и footer.
    Ну или стилями скрыть их
    Ответ написан
    Комментировать
  • Что такое window.__INITIAL_STATE__?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    При использовании предварительного рендеринга страниц, независимо на стороне сервера(SSR) или при билде приложения(SSG), разметка, прилетающая на клиент - просто разметка. Не реактивна.
    Думаю, Вы знаете, что есть такой процесс как гидратация - если коротко, то это как раз и есть процесс, когда статика обвешивается реактивностью.
    Стэйт - это просто объект в памяти.
    Откуда ему взяться в памяти, если начальное состояние приходит с сервера?
    Вот оно и приходит в переменной INITIAL_STATE.
    Происходит гидратация, initial_state становится, назовём условн, current state, то есть переходит в vm.$store и дальше работает как SPA.

    Для сео, напрямую, это никак не нужно. Нужно для вашего приложения.
    Ответ написан
    Комментировать
  • Возможно ли подменить поведение div на button, чтобы работала навигация по клавише Tab?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    Когда нажимаешь на клавишу tab еще раз, то следующаяя ссылка не подсвечивается, но должна.

    А чего это вдруг "должна"?
    Навигация между табами осуществляется стрелочками.
    Вот статья с примерами на основе стандартов доступности:
    https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

    По табу должно переходит фокус на контент таба, а не на следующий таб.
    Ответ написан
    1 комментарий
  • Как исправить ошибку мутации?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    поменять v-model на :value
    Ответ написан
    3 комментария
  • Как сделать свайп блока (Желательно VUE)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    https://qna.habr.com/q/879393#answer_1791997

    низкомолекулярный макрос, Вот тут можно посмотреть реализацию на сайте (через эмуляцию или на реальном мобильном, нужно нажать на зелёную кнопку снизу):
    https://svoefermerstvo.ru/catalog/root
    На яндекс картах в мобильной версии так же есть такая "шторка"

    Работает как по кнопке, так и свайпом.
    Ответ написан
    Комментировать
  • Как сложить название классов?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Шаблонные строки: https://developer.mozilla.org/ru/docs/Web/JavaScri...
    Или сделать вычисляемое свойство, которое будет возвращать строку.
    Ответ написан
    2 комментария
  • Как получить $event в vue если у события больше одного параметра?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    @dragstop="(x, y) => dragged(id, x, y)"
    
    dragged(id, x, y) {
      console.log(id, x, y);
    }
    Ответ написан
  • Как перейти к компонету по клику?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Есть доп. Называется клавиша Ctrl(Cmd на mac os) + клик левой кнопкой мыши.
    Но для этого нужно чтоб VS Code справился с резолвом путей как относительных, так и через алиасы. А вот это уже задача по сложнее, которой, возможно, у Вас не будет. (Для решения которого можно погуглить, ну а если не выйдет создать более подходящий по теме вопрос)

    Навёл с зажатым ctrl - при клике открывает файл компонента.
    61fb933dd0887650283681.png

    А вот такой импорт
    import CheckoutAccessories from '~/components/pages/checkout/CheckoutAccessories'
    мне вс код уже не хочет открывать, так как я не заморачивался.

    Но компонент всегда легко открыть через Ctrl+P -> ctrl+v название компонента. -> enter
    Ответ написан
    Комментировать
  • Как взаимодействовать между компонентами через Promise?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Как из одного компонента после после отправки запроса внутри него вернуть результат промиса (resolve/reject), чтобы в другом компоненте обработать его через then

    Ну нужно значит вернуть Promise или Promise.resolve(response). (хотя это что-то сомнительное)

    Компоненты при этом могут находиться не рядом и не иметь общего родителя.

    Ну, на этот случай есть 2 основных подхода.
    1) Глобальное хранилище - vuex.
    1.1) Инициализируете стор
    1.2) В компоненте, которому нужны данные - делаете вычисляемое свойство на свойство стора.
    1.3) В компоненте, в котором делаете запрос - кладёте в then данные из ответа в стор в соответствующее свойство по средствам экшена(ну или мутации на худой конец). (Одна из практик делать запрос данных в экшене, тогда в экшене по результату выполнения запроса и вызовете мутацию для изменения стора, а в компоненте просто вызовете экшен)

    2) Глобальная шина событий EventBus (считается сомнительным паттерном) - Один компонент подписывается на событие с произвольным именем - второй компонент диспатчит событие с произвольным именем и передаёт полезную нагрузку. В итоге компонент-подписчик в обработчике получит эти данные.

    Независимо от подхода, не нужно в компоненте потребителе обрабатывать через then. Компоненты должны реагировать только на изменение поступающих данных, но не на состояние промиса другого компонента.
    Ответ написан
  • Использовать строку в v-bind:class?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Можете
    :class="`button_${buttonName}`"
    Ответ написан
    Комментировать
  • Можно ли во Vue использовать setTimeout в шаблоне?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    setTimeout возвращает id таймера. Таким образом, использовав его в шаблоне, Вы сразу получите true-like value. И класс навесится.
    Сделайте появление класса в зависимости от значения свойства в data, по умолчанию свойство false, а в mounted сделайте setTimout, в котором поменяете это свойство на true - класс обновится.

    Пример из документации: Работа с классами и стилями
    Ответ написан
  • Как решить ошибку Error in created hook: "TypeError: Cannot read property 'id' of undefined"?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Минутка обучения отладке:
    0) Читаем текст ошибки. Видим что она из Post.vue.
    1) Смотрим трэйс ошибки.
    2) Видим что:
    created -> fetchComponents -> cannot read id of undefined

    3) Смотрим метод fetchComponents:
    4) id используется только в одном месте
    5) this.posts.id
    6) Делаем вывод: this.posts во время выполнения метода = undefined
    7) Смотрим что такое this.posts
    8) Видим что такого не существует
    9) А существует this.post (определено в props компонента)
    10) Делаем вывод: опечатались или стали жертвой собственного копипаста и нужно в этом методе удалить лишнюю s.
    Ответ написан
    9 комментариев
  • Почему не работает v-model?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Короткий ответ:
    1) Задайте инпуту атрибут value пропс value через v-bind
    2) нужно эмитить событие input с новым значением value при наступлении события input
    Подробнее:
    https://kirillurgant.com/notes/creating-custom-inp...
    Ответ написан
    2 комментария
  • Vue, vualidate как начать валидацию?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    vuelidate смотрит на Ваши свойства в data(){} и делает computed свойства, подписываясь на них, когда Вы указываете их в соответствующем объекте validations.
    Пример:
    data() {
      return {
        name: '',
      },
    },
    validations() {
      return {
        name: { required },
      },
    },


    где то в шаблоне:
    <input type="text" v-model="name" @input="$v.name.$touch()"/>

    Или
    <input type="text" v-model="$v.name.$model"/>
    Во втором случае автоматически вызывается метод $touch, который определяет "трогал" ли пользователь поле, а значение, которое ввели в поле прописывается в data.name и в $v.name.$model.
    Потрогал ли пользователь поле отображается в свойстве $v.name.$dirty;
    Так как мы передали валидатор required, то там же можно будет и посмотреть текущий статус этого валидатора:
    $v.name.required;
    Там ещё есть много других полезных свойств.
    Можно опираться, например, на $v.name.$invalid
    или на
    $v.name.$dirty && !$v.name.required // означает что поле потрогали и условие в required НЕ выполнилось. Когда поле будет заполнено - required вернёт true

    Под "потрогали" предполагается что пользователь не просто установил фокус в поле и вышел из него, а что-то ввёл.

    Так же можно посмотреть общий статус валидации текущего компонента в корне $v.$invalid и тд
    Ответ написан
    4 комментария
  • Как правильно передать полученные данные из Computed в Vue?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну значит у Вас в FormData нет свойства Inputs.
    let FormData = this.AddProduct  // --> this.AddProducts не содержит свойства Inputs

    Более того, похоже и FormData - undefined.
    То есть this.AddProducts - undefined
    Ответ написан
    Комментировать
  • Как обновить переменную в компоненте из store?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Вы теорию хотя бы прочитали?
    Чтобы свойство автоматически обновлялось от значения в сторе, оно должно быть в computed.
    Ответ написан
    Комментировать
  • Есть альтернатива для отправки через FormData?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Только желательно чтобы у Вас форма была сделана по правилам. Элементы имели все необходимые атрибуты, такие как name и value.
    const data = new FormData(formElement)

    Альтернативный вариант - иметь на каждое поле формы или на всю форму объект в свойстве vue - data(){}
    А при изменении значений в инпутах обновлять данные в этом объекте. А при сабмите отправлять этот объект в формате json, например. Только картинку нужно будет преобразовывать, скажем, в base64 или в то, что сможет обработать Ваш бэкенд.
    Ответ написан
  • С чего нужно начать изучение связки GraphQL с Vue.js?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Порядок изучения:
    REST(Чтобы понимать откуда\зачем взялся GraphQL) -> GraphQL -> Apollo -> Vue-Apollo

    Apollo - библиотека\клиент для работы с GraphQL.
    Vue-Apollo - соответственно, адаптация Apollo для Vue.
    Зачем - для удобства.

    https://habr.com/ru/company/rambler_group/blog/418417/
    Ответ написан
    4 комментария