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.
const selectors = {
wrapper: '.numberQut',
input: '.qut',
minus: '.minusQus',
plus: '.plusQus',
};
const limits = {
min: 1,
max: 5,
};
const updateValue = (el, change = 0) =>
el.value = Math.min(limits.max, Math.max(limits.min, (parseInt(el.value) || 0) + change));
document.addEventListener('click', ({ target: t }) => {
const change = +t.matches(selectors.plus) || -t.matches(selectors.minus);
if (change) {
updateValue(t.closest(selectors.wrapper).querySelector(selectors.input), change);
}
});
document.addEventListener('input', ({ target: t }) => {
if (t.matches(selectors.input)) {
updateValue(t);
}
});function App() {
const [ count, setCount ] = useState(3);
const updateCount = ({ target: { dataset: { change } } }) =>
setCount(Math.max(0, count + +change));
const refs = useRef([]);
const logRefs = () => console.log(refs.current);
useEffect(() => {
refs.current.length = count;
}, [ count ]);
return (
<div>
<button onClick={updateCount} data-change={-1}>-</button>
{count}
<button onClick={updateCount} data-change={+1}>+</button>
<button onClick={logRefs}>log refs</button>
{Array.from({ length: count }, (n, i) => (
<div ref={el => refs.current[i] = el}>
{Math.random() * 1000 | 0}
</div>
))}
</div>
);
}<label v-for="f in filters">
<input type="checkbox" v-model="f.checked">
{{ f.name }}
</label>computed: {
filteredFood() {
const filters = this.filters.filter(n => n.checked).map(n => n.code);
return this.meatFood.filter(n => filters.some(f => n[f]));
},
},