watch: {
'$route.params.slug': {
immediate: true,
handler() {
// сюда переносите код из created
},
},
},const arr = [ '***', '+++' ];
const obj = {
'!!!': [
{ id: 0, text: 'fjdklsfjklds' },
],
'+++': [
{ id: 3, a: '111', b: '!!!' },
{ id: 9, a: '222', b: '???' },
{ id: 27, a: '333', b: ':::' },
{ id: 81, a: '444', b: '...' },
],
'***': [
{ id: 69, text: 'hello, world!!' },
{ id: 187, text: 'fuck the world' },
{ id: 666, text: 'fuck everything' },
],
};document.body.insertAdjacentHTML('beforeend', arr.map(n => {
const columns = Object.keys(obj[n][0]);
return `
<h1>${n}</h1>
<table>
<thead>
<tr>${columns.map(n => `
<th>${n}</th>`).join('')}
</tr>
</thead>
<tbody>${obj[n].map(row => `
<tr>${columns.map(col => `
<td>${row[col]}</td>`).join('')}
</tr>`).join('')}
</tbody>
</table>`;
}).join(''));document.body.append(...arr.flatMap(n => {
const columns = Object.keys(obj[n][0]);
const header = document.createElement('h1');
const table = document.createElement('table');
header.textContent = n;
columns.forEach(function(col) {
this.append(document.createElement('th'));
this.lastChild.textContent = col;
}, table.createTHead().insertRow());
obj[n].forEach(function(row) {
const tr = this.insertRow();
columns.forEach(col => tr.insertCell().textContent = row[col]);
}, table.createTBody());
return [ header, table ];
}));Логика такая, при клике на пункт списка, например "About" этот текст оказывался на месте текущего, а текущий в списке.
dropdown-menu-item, например. И код в обработчик клика:const item = event.target.closest('.dropdown-menu-item');
if (item) {
const btn = item.closest('.dropdown').querySelector('.dropdown-toggle');
[ btn.textContent, item.textContent ] = [ item.textContent, btn.textContent ];
}Я реализовал очень простые вкладки на React.js.
на Redux не работают
$index = array_search($value, $arr);
$newArr = $index !== false ? array_slice($arr, $index + 1, 5) : [];JSON.stringify([...this.querySelectorAll('[name]')].map(n => ({
[n.name]: n.type === 'checkbox' ? n.checked : n.value,
})))incrementCount = (id, name, price) => {
this.setState(({ count }) => {
const el = count.find(n => n.id === id);
return {
count: el
? count.map(n => n === el ? { ...n, count: n.count + 1 } : n)
: [ ...count, { id, name, price, count: 1 } ]
};
});
}this.state.count.reduce((acc, n) => acc + n.price * n.count, 0)const parseDate = str => new Date(str.split('/').reverse().join('-'));all_orders.sort((a, b) => parseDate(a.order_date) - parseDate(b.order_date));const sortedOrders = all_orders
.map(n => [ n, parseDate(n.order_date) ])
.sort((a, b) => a[1] - b[1])
.map(n => n[0]);str.replace(/(?<=.{2}).(?=.{2})/g, '*')
// или
str.replace(/^(.{2})(.+)(.{2})$/, (m, g1, g2, g3) => g1 + '*'.repeat(g2.length) + g3)
// или
Array.from(str, (n, i) => (i < 2 || i > str.length - 3) ? n : '*').join('').big-dropdown > .dropdown > button[aria-expanded="true"]::after {
content: "\25B2";
}const onClickRow = () => {
console.log('Строка');
};
const onClickButton = e => {
e.stopPropagation();
console.log('Кнопка');
};<div onClick={onClickRow}>
<button onClick={onClickButton}>click me</button>
</div>const onClickRow = e => {
if (e.target.tagName === 'BUTTON') {
console.log('Кнопка');
} else {
console.log('Строка');
}
};<div onClick={onClickRow}>
<button>click me</button>
</div>[...Array(12)].map((n, i) => new Date(0, i).toLocaleString('en-US', { month: 'long' }))Как правильно описать контролируемый компонент (Controlled Components)?
Warning: A component is changing an uncontrolled input of type radio to be controlled.
checked радиокнопки, а при повторном рендеринге задаёте. Как такое могло случится - свойство стейта, значение которого должно выступать в качестве значения checked, изначально не определено или определено криво - там null. А должно быть true или false. Надо исправить дефолтный стейт.помимо event мне нужно передать еще параметрыonClick={this.handleClickAnswerCheck.bind(this, param1, param2)}>
handleClickAnswerCheck = (param1, param2) => { ... //как запустить здесь //event.preventDefault(); или event.target... //?
bind, вовсе не означает, что она не может принимать иных значений, помимо привязанных. Чтобы получить доступ к объекту события, надо его в списке параметров указать - после тех, чьи значения вы привязываете:<button onClick={this.onClick.bind(this, param1, param2)}>click me</button>onClick(param1, param2, e) {
e.preventDefault();
console.log(e.target);
}<button onClick={e => this.onClick(e, param1, param2)}>click me</button>onClick(e, param1, param2) {
...
}<button onClick={this.onClick} data-param1={param1} data-param2={param2}>click me</button>onClick = e => {
const { param1, param2 } = e.target.dataset;
...
}computed: {
disabled() {
return !this.selected.length;
},
},<v-btn
:disabled="disabled"
...Object.entries(arr.reduce((acc, n) => {
const [ k, v ] = Object.entries(n)[0];
(acc[k] = acc[k] || []).push(...v);
return acc;
}, {})).map(n => Object.fromEntries([ n ]))Пробовал ставить перед скобкой «\» не работает.