data: () => ({
items: [
{ show: false, ... },
{ show: false, ... },
...
],
}),
computed: {
showItems() {
return this.items.filter(n => n.show);
},
},
mounted() {
this.items.forEach((n, i) => setTimeout(() => n.show = true, i * 1000));
},<transition-group name="fade">
<div v-for="n in showItems" :key="n.id">{{ n }}</div>
</transition-group>через Vuex я уже сделал, теперь хочу потренироваться на шине событий
в чём моя ошибка понять не могу
Весь текст, как я понимаю, находится в js-файле.
<tr>
<tr>
...
<tr><tr v-for="n in data">loadData() {
fetch(...).then(r => r.json()).then(r => this.data = r);
},const sumNested = (data, getVal, key) => Object
.entries(data instanceof Object ? data : {})
.reduce((acc, [ k, v ]) => acc + sumNested(v, getVal, k), getVal(key, data));
const numItems = sumNested(obj, (k, v) => (k === 'items' && Array.isArray(v)) ? v.length : 0);function sumNested(data, getVal) {
let result = 0;
for (const stack = [ [ , data ] ]; stack.length;) {
const [ k, v ] = stack.pop();
stack.push(...(v instanceof Object ? Object.entries(v) : []));
result += getVal(k, v);
}
return result;
}methods: {
onFileChange(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
const image = new Image();
image.onload = () => {
this.$emit('uploaded', {
file,
src: image.src,
});
};
image.src = reader.result;
};
reader.readAsDataURL(file);
}
},
},<i
v-text="img.src ? 'x' : '+'"
@click="$emit('remove')"
...
/>
<img
v-if="img.src"
:src="img.src"
...
>
<input type="file" accept="image/*" @change="onFileChange">v-model. В props переименовываете images в value, убираете из дефолтного значения объект с пустыми полями. Добавляете images в computed - в качестве значения будет копия value плюс, если длина value меньше максимально допустимой, тот объект с пустыми полями; сеттер - отправляет родителю images, из которого выкинут пустой объект:props: {
value: Array,
max: {
type: Number,
default: 3,
},
},
computed: {
images: {
get() {
const images = [...this.value];
if (images.length < this.max) {
images.push({
file: null,
src: null,
});
}
return images;
},
set(val) {
this.$emit('input', val.filter(n => n.file));
},
},
},methods: {
onUpload(index, img) {
this.images = this.images.map((n, i) => i !== index ? n : img);
},
remove(index) {
this.images = this.images.filter((n, i) => i !== index);
},
},<input-img
v-for="(n, i) in images"
:img="n"
@uploaded="onUpload(i, $event)"
@remove="remove(i)"
/>data: () => ({
images: [],
}),<set-imgs v-model="images" :max="5" />
final_data.reduce((acc1, num1) => acc1.reduce((acc2, num2) => acc2.concat(num1.map(num3 => [].concat(num2, num3))), []))
final_data.reduce((acc1, num1) => {
return acc1.reduce((acc2, num2) => {
acc2.push(...num1.map(num3 => [...num2, ...num3]));
return acc2;
}, [])
})return final_data.reduce((acc1, num1) =>
acc1.reduce((acc2, num2) => (
acc2.push(...num1.map(num3 => num2 + num3)),
acc2
), [])
).join(',');const whatIsInAName = (collection, source) =>
collection.filter(function(n) {
return this.every(([ k, v ]) => n[k] === v);
}, Object.entries(source));const parentSelector = '.wrap';
const wrapperTag = 'div';
const wrapperClass = 'wrap-item';
const wrapSize = 4;const $items = $(parentSelector).children();
for (let i = 0; i < $items.length; i += wrapSize) {
$items.slice(i, i + wrapSize).wrapAll(`<${wrapperTag} class="${wrapperClass}">`);
}const parent = document.querySelector(parentSelector);
const items = [...parent.children];
parent.append(...Array.from(
{ length: Math.ceil(items.length / wrapSize) },
(n, i) => {
const wrapper = document.createElement(wrapperTag);
wrapper.classList.add(wrapperClass);
wrapper.append(...items.slice(i * wrapSize, (i + 1) * wrapSize));
return wrapper;
}
));const text = document.querySelector('#area').value;
const pre = document.querySelector('#pre');
pre.innerHTML = text.replace(/f+/g, '<span>$&</span>');document.addEventListener('scroll', function() {
document.querySelector('.wrap_portfolio').style.transform = `translateX(${window.scrollY}px)`;
});const color = 'orange';
const { id } = Object.values(fruits).find(n => n.color === color) || {};state = {
block1: false,
block2: false,
}
componentDidMount() {
setTimeout(() => this.setState({ block1: true }), 3000);
setTimeout(() => this.setState({ block2: true }), 6000);
}
render() {
const { block1, block2 } = this.state;
return (
...
{block1 && <div class="block-1">Блок 1</div>}
{block2 && <div class="block-2">Блок 2</div>}
...
);
}