В документации не нашел ответа, как и похожего решения.
$sum = array_sum(array_column($arr, 'price'));
foreach ($arr as &$n) {
$n['weight'] = number_format($n['price'] / $sum * 100, 2).'%';
}
mounted() {
this.fetchPosts()
},
watch: {
'$route.query.page': {
immediate: true,
handler: 'fetchPosts',
},
},
Пушу в массив айтем и хочу затем проверять, если он в массиве уже есть, то...
return {
...state,
items: state.items.includes(action.payload)
? state.items.filter(n => n !== action.payload)
: [ ...state.items, action.payload ],
};
const index = state.items.indexOf(action.payload);
if (index === -1) {
state.items.push(action.payload);
} else {
state.items.splice(index, 1);
}
<script setup>
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
const onSwiper = (swiper) => console.log(swiper);
const onSlideChange = () => console.log('slide change');
const modules = [ Navigation, Pagination, Scrollbar, A11y ];
</script>
<style>
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/scrollbar';
</style>
const sum = elements =>
Array.prototype.reduce.call(
elements,
(acc, n) => acc + (+n.value || 0),
0
);
const $form = $('form').on('change', 'select', () => {
$('input').val(sum($form.find('select')));
});
const input = document.querySelector('input');
const selects = document.querySelectorAll('form select');
const onChange = () => input.value = sum(selects);
selects.forEach(n => n.addEventListener('change', onChange));
document.querySelector('form').addEventListener('change', function(e) {
if (e.target.tagName === 'SELECT') {
document.querySelector('input').value = sum(this.getElementsByTagName('select'));
}
});
let checked = null;
$('input').click(function() {
checked = checked === this.value ? null : this.value;
this.checked = !!checked;
});
// или
document.querySelectorAll('input').forEach(function(n) {
n.addEventListener('click', this);
}, function({ target: t }) {
t.checked = !!(this[0] = this[0] === t ? null : t);
}.bind([]));
const $checkboxes = $('input').change(function() {
if (this.checked) {
$checkboxes.not(this).prop('checked', false);
}
});
// или
const checkboxes = document.querySelectorAll('input');
const onChange = e => checkboxes.forEach(n => n.checked &&= n === e.target);
checkboxes.forEach(n => n.addEventListener('change', onChange));
const sum5 = (...args) =>
args.length > 4
? args.slice(0, 5).reduce((acc, n) => acc + n, 0)
: sum5.bind(null, ...args);
// или
// : (...args2) => sum5(...args, ...args2);
const selects = [...document.querySelectorAll('select')];
const onChange = () =>
selects.forEach(function({ value, options: [...n] }) {
n.forEach(m => m.hidden = this(m.value) && value !== m.value);
}, Set.prototype.has.bind(new Set(selects.map(n => n.value))));
selects.forEach(n => n.addEventListener('change', onChange));
function transposeTable(table) {
const headerCol = table.rows[0]?.cells[1]?.tagName === 'TH';
const content = Array.from(
table.rows,
tr => Array.from(tr.cells, td => td.innerHTML)
);
table.innerHTML = content[0]?.map((n, i) => `
<tr>${content.map((m, j) => (j = (headerCol ? j : i) ? 'td' : 'th', `
<${j}>${m[i]}</${j}>`)).join('')}
</tr>
`).join('') ?? '';
}
function transposeTable(table) {
const cells = Array
.from(table.rows, tr => [...tr.cells])
.reduce((acc, n) => (
n.forEach((m, j) => (acc[j] ??= []).push(m)),
acc
), []);
Array.prototype.forEach.call(table.children, n => n.remove());
cells.forEach(n => table.insertRow().append(...n));
}
const weights = {
j: 11,
q: 12,
k: 13,
a: 14,
};
const isStraight = hand => hand
.map(n => weights[n] ?? +n)
.sort((a, b) => a - b)
.every((n, i, a) => !i || (n - a[i - 1] === 1));
чекбокс.addEventListener('change', e => кнопка.disabled = !e.target.checked);
Вроде делаю как в документации
get the Swiper instance in components inside of Swiper
import { ref } from 'vue';
setup() {
const swiper = ref();
return {
swiper,
onSwiper: instance => swiper.value = instance,
...
};
},
<swiper
@swiper="onSwiper"
...
>
$('.elem_block').on('click', '.dell', function() {
$(this).closest('.block').addClass('fx_none');
$('.no-res').toggleClass('fx_none', !!$('.block:not(.fx_none)').length);
});
document.addEventListener('click', e => {
const btn = e.target.closest('.dell');
if (btn) {
btn.closest('.block').classList.add('fx_none');
document.querySelector('.no-res').classList.toggle(
'fx_none',
!!document.querySelector('.block:not(.fx_none)')
);
}
});
fx_none
вырезаем.no-res
и .elem_block
добавляем общую обёртку, какой-нибудь <div class="container">
.dell
вместо добавления класса, скрывающего элементы, удаляем их по-настоящему:document.querySelectorAll('.dell').forEach(function(n) {
n.addEventListener('click', this);
}, e => e.target.closest('.block').remove());
.no-res
, если в .elem_block
что-то есть:.container:has(.elem_block *) .no-res {
display: none;
}
.no-res
надо в том случае, если существует .block
без класса, которые его скрывает:.container:has(.block:not(.fx_none)) .no-res {
display: none;
}