const getItemSum = item => item.count * item.price;let sum = 0;
for (let i = 0; i < data.length; i++) {
sum = sum + getItemSum(data[i]);
}
// или
let sum = 0;
for (const n of data) {
sum += getItemSum(n);
}const sum = data.reduce((acc, n) => acc + getItemSum(n), 0);
// или
const sum = eval(data.map(getItemSum).join('+')) || 0;const sum = (function getSum(i, n = data[i]) {
return n
? getItemSum(n) + getSum(i + 1)
: 0;
})(0);$count = array_reduce(array_keys($arr), function($acc, $n) {
return $acc + (strpos($n, 'my.key') === 0);
}, 0);v-for вешаем на template, внутренний на tr, ячейки с rowspan'ами выводятся только на нулевой итерации внутреннего цикла:<template v-for="row in rows">
<tr v-for="(n, i) in row.links">
<td v-if="!i" :rowspan="row.links.length">{{ row.name }}</td>
<td v-if="!i" :rowspan="row.links.length">{{ row.age }}</td>
<td>{{ n }}</td>
</tr>
</template>template и v-for:<template v-if="!i">
<td v-for="k in [ 'name', 'age' ]" :rowspan="row.links.length">{{ row[k] }}</td>
</template><tr v-for="row in rows">
<td v-for="item in row">
<template v-if="item instanceof Array">
<div v-for="n in item">{{ n }}</div>
</template>
<template v-else>{{ item }}</template>
</td>
</tr><template v-for="row in rows">
<tr>
<td :rowspan="row.links.length">{{ row.name }}</td>
<td :rowspan="row.links.length">{{ row.age }}</td>
<td>{{ row.links[0] }}</td>
</tr>
<tr v-for="n in row.links.slice(1)">
<td>{{ n }}</td>
</tr>
</template>.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__outer-circle {
border-color: red;
}.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__inner-circle {
background-color: orange;
}.mdl-radio .mdl-radio__button:checked ~ .mdl-radio__label {
color: blue;
}v-for по индексам нужных вам элементов:<tr v-for="item in parsedCSV">
<td v-for="i in [ 0, 3 ]">{{ item[i] }}</td>
</tr>shortItems() {
return this.parsedCSV.map(([ name,,,job ]) => [ name, job ]);
},<tr v-for="item in shortItems">
<td v-for="n in item">{{ n }}</td>
</tr>Object.values(tasks.reduce((acc, { user: { id, name }, ...n }) => {
(acc[id] = acc[id] || { user: { id, name, tasks: [] } }).user.tasks.push(n);
return acc;
}, {}))computed: {
sortedUsers() {
return [...this.users].sort((a, b) => a.name.localeCompare(b.name));
},
},[object Object], дефолтное строковое представление объектов. Если первый аргумент, переданный в JSON.parse, не является строкой, он будет в строку преобразован. Вы пытаетесь распарсить объект. Нет необходимости использовать JSON.parse, всё уже как надо.
data: () => ({
items: [
{ buttonTitle: '...', blockClass: '...' },
{ buttonTitle: '...', blockClass: '...' },
...
],
active: null,
}),<button
v-for="n in items"
:class="{ active: active === n }"
@click="active = n"
>{{ n.buttonTitle }}</button><div v-if="active" :class="[ 'block', active.blockClass ]">изменяя что-то в одном компоненте, меняется во всех
$k = array_keys($arr);
$v = array_values($arr);
sort($k);
sort($v);
$arr = array_combine($k, $v);const items = [
{ id: ..., title: '...', img: '...' },
{ id: ..., title: '...', img: '...' },
...
];function Slider({ items }) {
const [ active, setActive ] = React.useState(0);
const { length, [active]: slide } = items;
const next = e => setActive((active + +e.target.dataset.step + length) % length);
const goTo = e => setActive(+e.target.dataset.index);
return (
<div>
<div className="slideshow-container">
<div className="mySlides fade">
<div className="numbertext">{active + 1} / {length}</div>
<img src={slide.img} />
<div className="text">{slide.title}</div>
</div>
<a className="prev" onClick={next} data-step={-1}>❮</a>
<a className="next" onClick={next} data-step={+1}>❯</a>
</div>
<div className="dots">
{items.map((n, i) => (
<span
key={n.id}
className={`dot ${i === active ? 'active' : ''}`}
onClick={goTo}
data-index={i}
></span>
))}
</div>
</div>
);
}animation-delay. Или поверните .container через transform: rotate.