state: {
page: 0,
perPage: 5,
total: 0,
posts: [],
loading: false,
},getters: {
numPages: state => Math.ceil(state.total / state.perPage),
},mutations: {
updateLoading: (state, loading) => state.loading = loading,
updatePosts: (state, { posts, total, page }) => Object.assign(state, { posts, total, page }),
},actions: {
async fetchPosts({ state, commit }, page) {
commit('updateLoading', true);
const start = (page - 1) * state.perPage;
const end = page * state.perPage;
const url = `https://jsonplaceholder.typicode.com/posts?_start=${start}&_end=${end}`;
try {
const response = await fetch(url);
const posts = await response.json();
const total = response.headers.get('x-total-count');
commit('updatePosts', { posts, total, page });
} catch (e) {
console.error(e);
}
commit('updateLoading', false);
},
},props: [ 'page', 'numPages' ],methods: {
goTo(page) {
this.$emit('paginate', page);
},
next(step) {
this.goTo(this.page + step);
},
},computed: {
isFirst() {
return this.page <= 1;
},
isLast() {
return this.page >= this.numPages;
},
},<button @click="goTo(1)" :disabled="isFirst"><<</button>
<button @click="next(-1)" :disabled="isFirst"><</button>
{{ page }} / {{ numPages }}
<button @click="next(+1)" :disabled="isLast">></button>
<button @click="goTo(numPages)" :disabled="isLast">>></button>v-model:model: {
prop: 'page',
event: 'paginate',
},computed: {
page: {
get() {
return this.$store.state.page;
},
set(page) {
this.$store.dispatch('fetchPosts', page);
},
},<компонент-пагинации
v-model="page"
:num-pages="$store.getters.numPages"
/>created() {
this.page = 1;
},<div v-if="$store.state.loading">данные загружаются, ждите</div>
<компонент-для-отображения-данных v-else :данные="$store.state.posts" />const siblings = Array.prototype.filter.call(
this.parentNode.children,
n => n !== this
);const siblings = [];
for (let el = this; (el = el.previousElementSibling); siblings.unshift(el)) ;
for (let el = this; (el = el.nextElementSibling); siblings.push(el)) ;$('.openFormPopup').click(e => $('#btn-clicked').val(e.target.dataset.title));const asyncForEach = (data, callback) =>
Array.prototype.reduce.call(
data,
(promise, n, i, a) => promise.then(() => callback(n, i, a)),
Promise.resolve()
).then(() => {});
// или
async function asyncForEach(data, callback) {
for (const [ i, n ] of data.entries()) {
await callback(n, i, data);
}
}asyncForEach(
document.querySelectorAll('li'),
li => new Promise(r => setTimeout(() => r(console.log(li.textContent)), 1000))
);Здесь только регуляркой или как?
function incrementNumberInString(str) {
for (let i = 0, iNum = -1; i < str.length; i++) {
if ('0123456789'.includes(str[i])) {
if (iNum === -1 && str[i - 1] === '[') {
iNum = i;
}
} else if (iNum !== -1 && str[i] === ']') {
return str.slice(0, iNum) + (Number(str.slice(iNum, i)) + 1) + str.slice(i);
} else {
iNum = -1;
}
}
return str;
}str.replace(/(?<=\[)\d+(?=\])/, m => ++m)
// или
str.replace(/\[\d+\]/, m => '[' + (m.slice(1, -1) - -1) + ']')
// или
str.replace(/\[(\d+)\]/, (m, g1) => `[${-~g1}]`)как лучше реализовать функционал, чтобы иконка была одна, а в нужных компонентах мы докидывали цвет?
выводит побуквенно
v-for так и перебирает - "побуквенно". То есть, значениями user являются строки единичной длины. Ну а свойств id, name, price и т.д. у строк нет, отсюда пустота там, где вы выводите свойства элементов users.
почему не удаляется item, а добавляется?
slice(0, -1)) плюс полная копия (slice(0)).deleteItem = id => {
this.setState(({ todoData }) => ({
todoData: todoData.filter(n => n.id !== id),
}));
}const newArr = [];
for (const n of arr) {
const [ us, s ] = n.us.split('-').map(n => n.split('_').map(Number));
newArr.push({
...n,
us: arr1.filter(n => us.includes(n)),
s,
});
}const newArr = arr.map(function(n) {
const us = n.us.match(/\d+/g).map(n => +n);
const s = us.splice(-1);
return {
id: n.id,
us: this(us),
s,
};
}, us => arr1.filter(Set.prototype.has.bind(new Set(us))));const getFreeDomainsCount = arr => arr
.map(n => n.split('@')[1])
.filter(n => freeEmailDomains.includes(n))
.reduce((acc, n) => (++acc[n], acc), Object.fromEntries(freeEmailDomains.map(n => [ n, 0 ])));const obj = arr.find(n => n.id === newObj.id);
if (obj) {
Object.assign(obj, newObj);
} else {
arr.push(newObj);
}PHPSESSID=(.*?);
.hidden {
transform: scale(0);
}.item {
transition: transform 0.5s;
}document.querySelectorAll('.item').forEach(n => n.classList.remove('hidden'));