• Есть ли для Vue плагины по работе с websocket'ами, которые позволяют получить ответ сервера после отправки сообщения напрямую?

    @deliro
    Агрессивное программирование
    Что значит "получить ответ напрямую"? Вебсокеты — асинхронное общение. Здесь нет принципа "запрос-ответ". На них можно сделать такое поведение, как и на любом асинхронном общении, используя correlation id.

    Например, ты посылаешь сообщение серверу с данными
    {"request": {"x": 123, "y": 123.45}, "id": "1234567"}
    , где id должен быть достаточно уникальным в пределах вебсокета. Например, последовательность натуральных чисел.

    И ты также ожидаешь, что ответ сервер вернёт с этим же id. Например, такой:
    {"response": {"x": 321, "y": 45.321}, "id": "1234567"}


    В это случае можно сделать что-то вроде такого:

    class WSHandler {
        constructor(ws) {
            this.ws = ws;
            this.sequence = 0;
            this.waiters = {};
        }
    
        onMessage(event) {
            const { data } = event;
            const { id } = data;
            if (!this.waiters[id]) {
                throw new Error(`No waiter for response #${id} was found`);
            }
    
            this.waiters[id](data.response);
            delete this.waiters[id];
        }
    
        sendRequest(requestData) {
            const id = this.sequence++
            const msg = {id, request: requestData};
            this.ws.send(msg);
            return new Promise(resolve => {
                this.waiters[id] = resolve;
            });
        }
    }
    
    ...
    
    const handler = new WSHandler(new WebSocket('wss://...'));
    const response = await handler.sendRequest({"hello": "world"});
    Ответ написан
    Комментировать
  • Почему не работают стандартные методы когда input меняется извне?

    Aetae
    @Aetae
    Тлен
    Это никак не связано с Vue. Изменения value через javascript не вызывают никаких событий. Нет событий - нет реакции. Умные скрипты, рассчитанные на работу в связке с другими вручную вызывают события input\change после изменения. Ваш скрипт в iframe, надо полагать, не умный.

    Если нет доступа к скрипту во фрейме, решение только костыль: следить вручную за вводом и вызывать нужные события, например так:
    <input ... ref="input">
    mounted() {
      const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
      Object.defineProperty(this.$refs.input, 'value', {
        ...valueDescriptor, 
        set(value) {
          valueDescriptor.set.call(this, value);  
          this.dispatchEvent(new Event('input', {
            bubbles: true,
            cancelable: true,
          }));
        } 
      })
    }
    Ответ написан
    3 комментария
  • Как загрузить с сервера первоначальные значения переменных используя Vuex?

    Fzero0
    @Fzero0
    Вечный студент
    как вариант в main.js в хуке beforeCreate выполнить инициализации заполнения стора
    new Vue({
      el: "#app",
      router,
      store,
      beforeCreate() {
        this.$http
          .jsonp(getURL(method, { offset: 1, album_id: 0, extended: 1 }))
          .then(response => {
            return response.json();
          })
          .then(data => {
            return data.response.items.map(items => {
            ///
              return items;
            });
          })
          .then(data => {
            this.$store.dispatch("getData", data);
          });
      {
    Ответ написан
    Комментировать
  • Почему не обновляются переменные после nextTick?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Ну, во-первых - переменные всё-таки обновляются. Во-вторых - проблема тут не столько в использовании nextTick, сколько в том, как браузер оптимизирует отрисовку страницы. Если одно и то же css свойство обновляется несколько раз подряд, то отрисовано будет только последнее состояние. Чтобы добиться желаемого поведения, вам надо спровоцировать reflow между изменениями свойства - тут есть разные варианты. Например.
    Ответ написан
    1 комментарий
  • Как сделать веб-сервис и не утонуть в процессе?

    gobananas
    @gobananas
    finishhim.ru
    1. Выделить одну главную функцию сервиса
    2. Сделать её, сверстать и выкатить, это будет MVP
    3. Не заморачиваться с вёрсткой
    4. Не заморачиваться с методами авторизации
    5. Не думать про нагрузку, не заниматься оптимизацией кода и БД
    6. Если поймали себя на мысли что вы думаете какой паттерн тут применить вы в Ж, просто пишите код, который работает!!
    7. Не совмещать написание сервиса, который вы РЕАЛЬНО хотите запустить с изучением чего-то нового (языка, БД). Утоните в учёбе и никогда не запустите.

    Это всё на своём опыте написания проекта говорю вам а не голословно ))
    Ответ написан
    10 комментариев
  • Vue, применение стилей к одному из нескольких одинаковых элементов?

    Vlad_IT
    @Vlad_IT Куратор тега JavaScript
    Front-end разработчик
    Делайте получение стиля через метод, в который будете передавать Id по которому определять какой стиль вернуть. Ну или прямо в атрибуте пишите
    <div v-bind:class="{ 'класс_для_определенного': id === 10, 'класс_для_всех': true }></div>
    Ответ написан
    Комментировать
  • Можно ли использовать .vue файлы компонентов без node.js?

    Куда прямо в код? В браузере?

    Разбором .vue файлов занимается vue-loader в Webpack. Он знает, что в этом файле есть теги <template>, <script>, <style>, а браузер такого не понимает, поэтому нужны специальные инструменты для его разбора.
    Не уверен, есть ли что-то для чтения .vue в runtime, но лучше пользоваться проверенной практикой - собирать исходник сборщиком с Babel (на входе - ваши модули разного формата, не только JS, на выходе - js bundle)
    Ответ написан
    Комментировать
  • Рендеринг изображений по условию?

    [i] - пропустили.

    for(var i = 0; i < diaryIcons.length; i++){
          	     return images('./' + diaryIcons[i].name + ".png")
         	}
    Ответ написан
    1 комментарий
  • Как совладать с реактивностью (c передачей по ссылке и глубоким копированием объекта)?

    nexmean
    @nexmean
    погромист
    Самый простой вариант - сделать так, как это рекомендуют разработчики Vue.
    В модуле empty_block вместо экспорта объекта можно экспортировать функцию возвращающую объект.
    export default function () {
      return {
        title: '',
        hash: '',
        end: {
          isEnd: 0,
          type: 0
        }
      }
    }


    В других модулях соответственно просто пишешь:
    import emptyBlock from 'emptyBlock'
    let block = emptyBlock()


    Почему у вас объект остаётся реактивно связан, так потому-что объекты в JS передаются по ссылке, а не по значению, соответственно даже если вы пересобрали объект с помощью { ...someObject }, объекты которые содержал someObject остаются теми же и при любой их мутации у всех владельцев ссылки на объект он меняется.

    Кстати, хочу отметить, что в JS не принято писать в snake_case, предпочтителен camelCase.
    Ответ написан
    Комментировать
  • Аналог $emit для модулей vuex?

    @JSmitty
    А функция subscribe у стора не решит вашу проблему? Подпишитесь на мутации каким-то обсервером, и по приходу определенной мутации, изменяющей пользователя - каскадом диспатчите экшны для изменения связанных данных.
    Или через watch на конкретно блок данных user, аналогично.

    Описано в документации скудно, см. раздел API Reference
    Ответ написан
    Комментировать
  • Возможно ли проксировать запросы в vuejs?

    @Volde
    Я не совсем понимаю при чем тут vuejs если проксирует node?
    Ответ написан
    2 комментария
  • Деструктурирующее присваивание?

    miraage
    @miraage
    Старый прогер
    Не усложняйте себе жизнь. В данном случае Вы не получаете ничего, кроме лишних преобразований babel = увеличиваете время сборки. Для таких примитивных случаев можно спокойно написать так:
    const dd = obj.dd;
    const dd1 = dd.dd1;
    Ответ написан
    2 комментария
  • Теперь это норма для фриланса?

    gzhegow
    @gzhegow
    Думал, стану умнее, когда адаптируюсь, но нет
    В нескольких словах:

    а) они не шарят, я имею в виду - они и вправду не шарят

    б) они отсеивают тех, кто подсядет на очко и ждут тех, кто их переубедит, но в бизнес-мире это нельзя сделать сказав что они неправы, тебе нужно найти косяк в их истории, копнуть глубже (если что, они могут и не знать что это косяк из пункта а)

    в) они ищут тех, слава которых, идет впереди того, что они на самом деле достигли

    г) они читают статьи с площадок типа хабра, задачей которого давным давно перестало быть "готовить умных людей" - теперь это продажа рекламы клиентам, которые считают себя умнее всех, только такими статьями их можно заткнуть в жопу и все же им продать. они начитываются этого говна и теперь они "такие же умные" - на самом деле нет

    д) кто первый это вычитает и впечатлит других - тот получает халявный авторитет из нихера, потому что никто не шарит - а он шарит

    Да вообще есть такой запрос в google "что такое ibm bluemix?"
    И там значит описание блуемикса на 25 строк.
    Описание вида "это технология по внедрению технологий в высокие технологии технологичных бизнес процессов и поэтому мы единственные на рынке"

    Чем больше люд тупеет, тем больше требования на вакансиях.
    Но сюрприз в том, что сколько-б-дофига ты не знал - на работу возьмут не тебя.
    А тот кто действительно изучит это все так чтобы отскакивало - будет удивляться какого его топчут на работе и из-за какой-то долбаной бумажки не дают взломать драный пентагон, потому что он может, но вот... нельзя.

    А потому что главное это видимость, а не результат.
    Добро пожаловать в мир адвокатов-финансистов-бизнесменов.
    Ответ написан
    2 комментария
  • Как в VUE JS сделать так чтоб при входе на сайт отображался только preloader пока все процессы не завершились?

    @ber_enot
    Веб-разработчик, Vue.js / Node.js
    В событие компонента mounted()
    добавить показ прелоадера, запустить методы загрузки данных
    убрать прелоадер, когда они завершатся (с помощью Promise.all)
    Читать про промисы тут - https://learn.javascript.ru/promise

    Примеры:
    один запрос:
    mounted() {
    	this.showPreloader = true
    	this.$http.get('/someUrl').then(response => {
    		// данные загружены, убираем прелоадер
    		this.showPreloader = false
    		// записываем полученные данные куда-либо
    		this.someData = response.body
    	}, response => {
    		// запрос завершился ошибкой
    		// показываем сообщение об ошибке
    		this.showPreloader = false
    		this.showError = true
    	});
    },

    Несколько запросов:
    mounted() {
    	this.showPreloader = true
    	Promise.all([
    		this.$http.get('/someUrl'),
    		this.$http.get('/someUrl2')
    	]).then(results => {
    		// данные загружены, убираем прелоадер
    		this.showPreloader = false
    	}, response => {
    		// один или несколько запросов завершились с ошибкой
    		// показываем сообщение об ошибке
    		this.showPreloader = false
    		this.showError = true
    	});
    },


    PS. Код справедлив для однофайловых компонентов с использованием Webpack. Используется синтаксис ES6.
    Ответ написан
    3 комментария