data: { circle: document.querySelector(`.circle`) },
.app Vue заменит элементами, которые создаст сам. Если хотите иметь доступ к ним, для этого есть специальный механизм. Т.е., добавляете атрибут ref элементу .circle:<div class="circle" ref="circle"></div>this.circle на this.$refs.circle:this.$refs.circle.style.left = `${e.pageX}px`;
this.$refs.circle.style.top = `${e.pageY}px`;data: () => ({
coords: [ 0, 0 ],
}),
computed: {
style() {
return {
left: this.coords[0] + 'px',
top: this.coords[1] + 'px',
};
},
},
created() {
document.addEventListener('mousemove', e => this.coords = [ e.pageX, e.pageY ]);
},<div class="circle" :style="style"></div>
function setVal(obj, path, val) {
const keys = path.split('.');
const key = keys.pop();
keys.reduce((p, c) => p[c] = p[c] || {}, obj)[key] = val;
return obj;
}
function replaceObjWithArr(obj) {
if (obj instanceof Object) {
const keys = Object.keys(obj).sort((a, b) => a - b);
obj = keys.every((n, i) => +n === i) ? keys.map(n => obj[n]) : obj;
keys.forEach(n => obj[n] = replaceObjWithArr(obj[n]));
}
return obj;
}
const output = replaceObjWithArr(Object
.entries(input)
.reduce((acc, n) => setVal(acc, ...n), {})
);state: State<T> = {
selectedItems: []
}
renderListItem: ({ item: T }) => T = ({ item }) => {
return item;
}const ChildComponent = (props) => (
<div
className={`childComponent ${props.isActive ? 'active' : ''}`}
onClick={props.onClick}
data-id={props.id}
>
<h3>{props.text}</h3>
</div>
);
const ParentComponent = ({ items }) => {
const [ active, setActive ] = React.useState(null);
const onClick = e => setActive(+e.currentTarget.dataset.id);
// или
// const onClick = e => setActive(+e.target.closest('[data-id]').dataset.id);
return (
<div>
{items.map(n =>
<ChildComponent
key={n.id}
onClick={onClick}
isActive={n.id === active}
{...n}
/>
)}
</div>
)
};
ReactDOM.render(
<ParentComponent
items={[
{ id: 69, text: 'hello, world!!' },
{ id: 187, text: 'fuck the world' },
{ id: 666, text: 'fuck everything' },
]}
/>,
document.getElementById('root')
);*-enter-active, *-leave-active и т.д. анимируются удаляемые/добавляемые элементы. Если key не изменился, элемент не будет удалён и заново добавлен, соответственно, и классы не будут добавляться.
<Body tmp={this.state.body.json.result} />{this.props.tmp.map(n => <div key={n._id}>{n.name}</div>)}<swiper @click="onClick"methods: {
onClick(e) {
const slide = e.target.closest('.swiper-slide');
if (slide) {
console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
}
},return перед getSum(sum).
$('a').click(function(e) {
e.preventDefault();
$('html').animate({
scrollTop: $($(this).attr('href')).offset().top,
}, 500);
});$('#input4').attr('checked', true);checked предназначен для задания дефолтного состояния радиокнопки, вместо него следует использовать одноимённое свойство.<fgroup class="fg1"><div class="fgroup">.const $groups = $('.fgroup').on('change', function(e) {
$groups
.not(this)
.find(`input[value!="${e.target.value}"]`)
.prop('checked', true);
});