const fs = require('fs');
let ID = 0;
const clients = {};
new (require('ws').Server)({
port: 8081,
}).on('connection', ws => {
const id = ++ID;
clients[id] = ws;
ws.on('close', () => {
delete clients[id];
});
});
fs.watch('./', (eventType, filename) => {
if (/\.json$/.test(filename)) {
fs.readFile(filename, 'utf8', (err, data) => {
if (!err && data) {
const info = JSON.stringify({
filename,
data: JSON.parse(data),
});
Object.values(clients).forEach(n => n.send(info));
}
});
}
});
<div id="app">
<div v-for="(data, name) in files">
<div>{{ name }}</div>
<div>{{ data }}</div>
</div>
</div>
new Vue({
el: '#app',
data: {
socket: null,
files: {},
},
created() {
this.socket = new WebSocket('ws://localhost:8081');
this.socket.onmessage = e => {
const f = JSON.parse(e.data);
this.$set(this.files, f.filename, f.data);
};
},
});
$refs.cpt.filter
. Типа так.$refs
- можно оформить в хранилище геттер, представляющий отфильтрованные данные, и создавать элементы для isotope'а на их основе. Как это может выглядеть. <button data-step="-1">Prev</button>
<button data-step="+1">Next</button>
$(document).on('click', '[data-step]', function({ target: { dataset: { step } } }) {
const $wrapper = $(this).closest('.wrapper');
const $blocks = $wrapper.find('.wrapper-small-block .small-block');
const $active = $blocks.filter('.active');
const $nextActive = $blocks.eq(($active.index() + +step) % $blocks.length);
$active.removeClass('active');
$nextActive.addClass('active');
$wrapper.find('.preview').html($nextActive.html());
});
// или
document.addEventListener('click', ({ target: t }) => {
const { step } = t.dataset;
if (step) {
const wrapper = t.closest('.wrapper');
const blocks = wrapper.querySelector('.wrapper-small-block').children;
const iActive = Array.prototype.findIndex.call(blocks, n => n.matches('.active'));
const nextActive = blocks[(iActive + +step + blocks.length) % blocks.length];
blocks[iActive].classList.remove('active');
nextActive.classList.add('active');
wrapper.querySelector('.preview').innerHTML = nextActive.innerHTML;
}
});
.news-popup__content__close
, генерируется событие click, оно обрабатывается - выполняется emit, генерируется событие close, оно обрабатывается в соответствующем обработчике, popup убирается. При этом событие click никуда не делось, оно всплывает, и в .news-block
обрабатывается ещё раз - только что удалённый popup снова рендерится. Ну а внешне это всё выглядит так, будто ничего и не произошло.<div class="news-popup__content__close" @click="$emit('close')"></div>
<div class="news-popup__content__close" @click.stop="$emit('close')"></div>
.news-block
у вас отдельный popup, что за дичь-то такая? Но ведь this.$refs.cpt
это объект а не массив.
const newData = Object
.entries(data)
.reduce((acc, [ k, v ]) => (v.length && (acc[k] = v), acc), {});
Object.keys(data).forEach(n => data[n].length || delete data[n]);
Можно использовать Lodash.
const newData = _.pickBy(data, n => n.length);
// или
_.each(data, (v, k) => v.length || delete data[k]);
[55.7977,37.7283] - например эту строку в объект
JSON.parse(str)
.str.match(/\d+(\.\d+)?/g).map(n => +n)
// или
str.slice(1, -1).split(',').map(Number)
// или
eval(str)
// или
new Function(`return ${str}`)()
пытаюсь остановить выполнение функции
data: () => ({
intervalID: null,
}),
methods: {
mouseEnter() {
this.intervalID = setInterval(() => {
console.log('тик');
}, 500);
},
mouseLeave() {
clearInterval(this.intervalID);
this.intervalID = null;
},
},
you have to pass formReducer under 'form' key
if (!formElementsByGroup[formType]) {
formElementsByGroup[formType] = [];
}
const formElementsByGroup = formElements.reduce((acc, n) => {
const type = searchForm[n].formType;
(acc[type] = acc[type] || []).push(n);
return acc;
}, {});
почему при закрытии через метод Close - окно потом не открывается?!?!
this.show = false;
show: { required: true, type: Boolean, twoWay: false }