Комментарии пользователя Андрей Хохлов

У всех тупит Vue Dev Tools?

Андрей Хохлов @andrhohlov

Вкладка браузера повисает намертво с компонентом Table из Quasar, помогло только отключение DevTools.

Написано более года назад

Ошибка при выполнении команды npm install на VPS. Как решить?

Андрей Хохлов @andrhohlov

Где вы ошибку то увидели?

Написано более двух лет назад

Можно ли вызвать переполнение стэка без рекурсии?

Андрей Хохлов @andrhohlov

Рискну:

function foo() { 
  bar();
}

function bar() { 
  foo();
}

foo();

VM204:1 Uncaught RangeError: Maximum call stack size exceeded
    at bar (<anonymous>:1:18)
    at foo (<anonymous>:1:18)
    at bar (<anonymous>:1:18)
    at foo (<anonymous>:1:18)
    at bar (<anonymous>:1:18)
    at foo (<anonymous>:1:18)
    at bar (<anonymous>:1:18)
    at foo (<anonymous>:1:18)
    at bar (<anonymous>:1:18)
    at foo (<anonymous>:1:18)

Рекурсия подразумевает, что функция вызывает саму себя. В моём примере ни одна из функций не является рекурсивной.

Написано более двух лет назад

Как исправить ошибки при подключении vuelidate?

Андрей Хохлов @andrhohlov

akchl1, информация об уязвимостях никак не связана с тем что у вас есть какие-то ошибки с vuelidate

https://docs.npmjs.com/auditing-package-dependenci...
https://stackoverflow.com/questions/50243901/found...

Написано более двух лет назад

Как исправить ошибки при подключении vuelidate?

Андрей Хохлов @andrhohlov

на скриншоте нет ошибок

Написано более двух лет назад

Как использовать импортированную переменную в шаблоне?

Андрей Хохлов @andrhohlov

uRoot, можно. В целом можно любые выражения и вычисления использовать в шаблонах.

Непосредственно в документации объясняется мотивация использования computed https://vuejs.org/v2/guide/computed.html - длинные/сложные выражения в шаблонах трудно читать и поддерживать. Плюс computed кешируются.

Склеить 2 строки это конечно ;t не про сложные выражения, так что тут скорее про best practices принятые у нас.

Кроме того, в вашем случае правильным решением

->

Кроме того, на мой взгляд более правильным

Написано более двух лет назад

Почему gulp не обновляет все файлы html?

Андрей Хохлов @andrhohlov

Скиньте целиком gulpfile, пожалуйста

Написано более трёх лет назад

Как отследить над каким элементом находиться пользователь?

Андрей Хохлов @andrhohlov

denis-chenykh, отложите изучение jQuery и Vue до того момента, как изучите JS и https://developer.mozilla.org/en-US/docs/Web/API/D...

И вам станет сразу понять, как добавить обработчик события на элементе, какое именно событие нужно (mouseenter или mousemove в вашем случае). И затем уже можно будет приступать к документации к Vue где написано как правильно слушать события в нём https://v3.vuejs.org/guide/events.html

Написано более трёх лет назад

Как я могу подключить шрифт HYWenHei в node js используя Canvas?

Андрей Хохлов @andrhohlov

Судя по всему, не только вы столкнулись с подобной проблемой. Причём последние ишью прям по вашему шрифту.

https://github.com/Automattic/node-canvas/issues/1887
https://github.com/Automattic/node-canvas/issues/1801
https://github.com/Automattic/node-canvas/issues/1608
https://github.com/Automattic/node-canvas/issues/868

Попробуйте другой шрифт, чтобы убедеться что проблема именно с конкретным шрифтом.
Попробуйте, может что-то из обсуждений поможет в вашем случае.
Попробуйте в докере запустить. У меня есть сервис который использует кастомный шрифт в node-canvas, без проблем.

Написано более трёх лет назад

Как использовать ES6 Proxy с TypeScript?

Андрей Хохлов @andrhohlov Автор вопроса

WbICHA, спасибо, работает. И с параметрами тоже

https://www.typescriptlang.org/play?ssl=80&ssc=3&p...

В целом, исходя из постановки вопроса, этого достаточно чтобы его закрыть.
Но с вашего позволения немного продолжу и ещё попозорюсь пробелами в знаниях TS.

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

Минимальный пример

// types.ts

export interface IAppContext {
  api: ApiType, // ???
}

// main.ts

import { createApi } from './services/Api';
import { IAppContext } from './types';
import { createStore } from './store';

const api = createApi(
  { url: '/' },
  {
    getData: { method: 'get', url: '/data' },
  },
);

const context : IAppContext = {
  api,
};

const store = createStore(context);

// store.ts

import { IAppContext } from './types';

export function createStore(context: IAppContext)  {}

Я понимаю, что сейчас у нас тип api - generic и объявить его в отдельном файлике становится невозможным.
Можно пойти дальше и "задженерить" вообще всё...

createStore<typeof context>(context);
function createStore<T>(context: T)  {}

Но я опасаюсь, не будет ли это потенциальным клубком проблем в будущем. А кроме того есть места, где это в принципе не ложится:

import { InjectionKey } from 'vue';
import { IAppContext } from './types';

export const APP_CONTEXT_KEY: InjectionKey<IAppContext> = Symbol('context');

Нашёл такой вариант:

// types.ts

import { Api } from './api';

export interface IAppContext {
  api:  Api,
}

// api.ts

import { createApi } from '@/services/Api';

export const api = createApi(
  { url: process.env.VUE_APP_API_URL },
  {
    getTodo: { method: 'get', url: '/todos/{id}' },
  },
);

export type Api = typeof api;

Но и тут компромис, мне не очень нравится отдельный файл в таком случае. Теоретически могла бы возникнуть потребность передавать что-то в функцию создающую api клиент в main.ts.

Было бы интересно услышать ваше мнение (и мнение коллег которые заглянут в тред) относительно этой ситуации.

Написано более трёх лет назад

Как интегрировать логику из react в vue?

Андрей Хохлов @andrhohlov

Ростислав,

UPD: ещё до кучи к размышлению, но опять же это не про пару компонентов https://github.com/rajasegar/awesome-micro-frontends

Написано более трёх лет назад

Проблема с реактивностью в Vue 3 при рендере элементов в computed?

Андрей Хохлов @andrhohlov

Comnox, у computed свойств не должно быть побочных эффектов - они не должны в ходе вычисления менять какие-либо другие свойства.

Написано более трёх лет назад

Проблема с реактивностью в Vue 3 при рендере элементов в computed?

Андрей Хохлов @andrhohlov

Зачем же вы в computed такое делаете... В методы вынесите для начала.

Написано более трёх лет назад

Как использовать библиотеку Lodash внутри шаблонов Pug-а?

Андрей Хохлов @andrhohlov

lorentso, отметьте решением ответ. Я сделал ровно то, что там написано.

Написано более трёх лет назад

Как использовать библиотеку Lodash внутри шаблонов Pug-а?

Андрей Хохлов @andrhohlov

lorentso, всё работает:

package.json

{
  "name": "pug-lodash-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-pug": "^5.0.0",
    "pug": "^3.0.2"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

gulpfile.js

const { src, dest } = require('gulp');
const pug = require('gulp-pug');
const _ = require('lodash');

exports.views = () => {
  return src('./src/*.pug')
    .pipe(
      pug({
        data: {
          message: 'Hello, world!',
          _,
        },
      }),
    )
    .pipe(dest('./dist'));
};

src/index.pug

h1
    =message
h2
    =_.camelCase('Foo Bar')

Написано более трёх лет назад

Как использовать библиотеку Lodash внутри шаблонов Pug-а?

Андрей Хохлов @andrhohlov

lorentso, скиньте архивом, так не понятно

Написано более трёх лет назад

Как использовать библиотеку Lodash внутри шаблонов Pug-а?

Андрей Хохлов @andrhohlov

lorentso, так вы попробовали то что по ссылке или нет?

Написано более трёх лет назад

Генерация картинок товара на сайте WP?

Андрей Хохлов @andrhohlov

А если решить это на фронтенде?
Контейнер с фоном, в него выводить фото товара.
Так можно будет и фон кастомизировать в зависимости от категории и т.д.

Написано более трёх лет назад

Как передать computed data в дочерний template по клику?

Андрей Хохлов @andrhohlov

SolidMike, отложите Vue до момента как разберетесь с js

Написано более трёх лет назад

Как передать computed data в дочерний template по клику?

Андрей Хохлов @andrhohlov

export default {
  data() {
    return {
      hotels: [],
      visibleHotels: [],
      selected_countries: null,
      selected_types: null,
      reviews_amount: '',
      checked_stars: [],
      price_range: '',
    };
  },
  methods: {
    applyFilters() {
      this.visibleHotels = this.hotels.filter(() => { /* логика фильтрации */ });
    },
    resetFilters() {
      this.selected_countries = null;
      this.selected_types = null;
      this.reviews_amount = '';
      this.checked_stars = [];
      this.price_range = '';
      this.applyFilters();
    },
  },
}

<HotelsList :listData="visibleHotels" />
<button type="button" @click="applyFilters()">
<button type="button" @click="resetFilters()">

Написано более трёх лет назад

Войдите на сайт