Как я понял, v-model в компоненте ProductRow обновляет почему-то не локальную копию item, а state у стора
data() { return { 'item': this.initialItem } }
Object.assign({}, this.initialItem). Или так: { ...this.initialItem }.
data: () => ({
items: [ 'имя-компонента-1', 'имя-компонента-2', 'имя-компонента-3' ],
selected: null,
}),<li
v-for="n in items"
v-text="n"
@click="selected = n"
></li><component v-if="selected" :is="selected"></component>Делаю вроде все по документации ангулар!
import { Injectable } from '@angular/compiler/src/core';import { Injectable } from '@angular/core';
onScroll = e => {
if (e.target.offsetHeight + e.target.scrollTop === e.target.scrollHeight) {
/*
* здесь предпринимаете действия, имеющие своим результатом
* демонстрацию дополнительного контента
*/
}
}<div onScroll={this.onScroll}>
...[...document.querySelector('ul').children]
.map(n => ({ el: n, text: n.querySelector('.link').innerText }))
.sort((a, b) => a.text.localeCompare(b.text))
.forEach(n => n.el.parentNode.append(n.el));const middle = arr =>
[...arr].sort((a, b) => a - b)[arr.length >> 1];function middle(arr) {
const min = Math.min(...arr);
const max = Math.max(...arr);
const mid = max - (max - min) / 2;
return arr.reduce((closest, n) => {
const diff = Math.abs(n - mid);
return diff < closest[1] ? [ n, diff ] : closest;
}, [ void 0, Infinity ])[0];
}const Image = ({ url }) => (
<div>
<img src={url} />
</div>
);
class App extends React.Component {
state = {
items: [],
}
componentDidMount() {
fetch('https://api.kai-zer.ru/dev/method/products.getAll')
.then(r => r.json())
.then(r => {
this.setState({
items: r.response.items,
});
});
}
render() {
return (
<div>
{this.state.items.map(n => <Image {...n.image} />)}
</div>
);
}
}const blockSelector = '.block';
const buttonSelector = '[data-class]';
const activeClass = 'active';
const blocks = document.querySelectorAll(blockSelector);
const buttons = [...document.querySelectorAll(buttonSelector)];
const classes = buttons.map(n => n.dataset.class);
document.body.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
blocks.forEach(n => {
n.classList.remove(...classes);
n.classList.add(button.dataset.class);
});
buttons.forEach(n => n.classList.toggle(activeClass, n === button));
}
});$('ul').click(function(e) {
e.stopPropagation();
const $li = $(e.target).closest('li');
if ($li.length) {
$li.children('ul').toggle();
$li.siblings().children('ul').hide();
}
}).find('ul').hide();Поиск работает только с первого раза. Потом, когда состояние должно вернуться после фильтрации, этого почему-то не происходит.
class App extends React.Component {
state = {
people: this.props.people,
};
handeSearch = e => {
const search = e.target.value.toLowerCase();
this.setState((state, { people }) => ({
people: people.filter(n => n.name.toLowerCase().includes(search)),
}));
}
render() {
return (
<div className="contacts">
<input
type="text"
className="search-field"
onChange={this.handeSearch}
/>
<ul className="contacts-list">
{this.state.people.map(n => <Person key={n.id} {...n} />)}
</ul>
</div>
);
}
}
ReactDOM.render(
<App people={Peoples} />,
document.getElementById('root')
);$('.new-game') добавляется динамически на страницу
.new-game в тот момент, когда вы его пытаетесь получить.Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент...
theaddraggable добавляете атрибут element="tbody"tr из шаблона компонента table-operations выбрасываете, v-for будет по item-operationitem-operation оборачиваете все td в один общий tr
<button @click="someFunction($event.target)">Click!</button>повесить на него определенный класс
body анимируйте .wrapper:$('.vertical').on('click', 'a', function(e) {
e.preventDefault();
const id = $(this).attr('href');
const $wrapper = $('.wrapper');
const offset = $(id).offset().top;
const scrollTop = offset + $wrapper.scrollTop();
$wrapper.animate({ scrollTop }, 1500);
});Теперь вопрос в другом. Как правильно поступать. Если объекты и массивы передаются по ссылке? делать еще одну операцию по копированию?
let puzzles = getters.getPuzzleslet puzzles = [...getters.getPuzzles]