хочу, чтобы модальное окно отображалось столько раз, сколько событий в дне, и каждый раз с подробной информацией о новом событии
computed: {
detailInformationOfEvent() {
return this.detailInformationOfEvents[0];
},
...
this.detailInformationOfEvents.push({
...
});
v-show="detailInformationOfEvent"
detailInformationOfEvents.shift()
<keep-alive include="имя-компонента-страницы-с-табами">
<router-view></router-view>
</keep-alive>
props: [ 'start', 'end', 'title', 'delay' ],
data: () => ({
val: null,
}),
created() {
this.val = this.start;
const interval = setInterval(() => {
if (++this.val >= this.end) {
clearInterval(interval);
}
}, this.delay);
},
<div>
<h3>{{ title }}</h3>
<div>{{ val }}</div>
</div>
data: () => ({
counters: [
{ start: -20, end: 69, title: 'hello, world!!', delay: 40 },
{ start: 0, end: 187, title: 'fuck the world', delay: 45 },
{ start: 400, end: 666, title: 'fuck everything', delay: 20 },
],
}),
<v-counter
v-for="n in counters"
v-bind="n"
/>
data: () => ({
width: 0,
}),
computed: {
itemSize() {
return this.width > 700 ? 46 : 56;
},
},
methods: {
onResize() {
this.width = window.innerWidth;
},
},
created() {
this.onResize();
window.addEventListener('resize', this.onResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.onResize);
},
// или
data: () => ({
itemSize: null,
}),
created() {
const mql = window.matchMedia('(max-width: 700px)');
const onChange = () => this.itemSize = mql.matches ? 56 : 46;
onChange();
mql.addEventListener('change', onChange);
this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},
:item-size="itemSize"
const data = new FormData();
data.append('sampleFile', this.file);
fetch('http://localhost:3000/upload/', {
method: 'post',
body: data,
})
@change="submitFile($event.target.files[0])"
methods: {
submitFile(file) {
...
как правильно сделать из этого директиву?
Note: This method is obsolete and should not be used. In particular, to interact with the clipboard, consider using the Clipboard API instead.
const clipboardDirective = (() => {
const values = new Map();
const onClick = e => navigator.clipboard.writeText(values.get(e.currentTarget));
return {
bind(el, binding) {
el.addEventListener('click', onClick);
values.set(el, binding.value);
},
update(el, binding) {
values.set(el, binding.value);
},
unbind(el) {
el.removeEventListener('click', onClick);
values.delete(el);
},
};
})();
Vue.directive('clipboard', clipboardDirective);
data: () => ({
scroll: 0,
...
}),
created() {
window.addEventListener('scroll', () => this.scroll = window.scrollY);
},
computed: {
scrollClasses() {
return что-то, в зависимости от значения this.scroll;
},
...
},
<div :class="scrollClasses"></div>
slick-slide
у предков целевого элемента, номер слайда можно определить через атрибут data-slick-index
(или можете назначать слайдам какие-то свои классы/атрибуты для выяснения, где был произведён клик).