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
в тот момент, когда вы его пытаетесь получить.Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент...
thead
draggable
добавляете атрибут element="tbody"
tr
из шаблона компонента table-operations
выбрасываете, v-for
будет по item-operation
item-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.getPuzzles
let puzzles = [...getters.getPuzzles]
Через масив slides(условно) их не выведешь т.к контент у них различаеться...
const div = document.createElement('div');
div.innerHTML = str;
const arr = Array.from(div.children, n => n.innerText);
const arr = Array.prototype.map.call(
new DOMParser().parseFromString(str, 'text/html').body.children,
n => n.textContent
);
const arr = [];
for (const n of document.createRange().createContextualFragment(str).children) {
arr.push(n.innerHTML);
}
const selector = '.text_size';
const maxlen = 3;
$(selector).text((i, text) => {
return text.length > maxlen ? text.slice(0, maxlen) + '...' : text;
});
const reg = RegExp(`(.{${maxlen}}).+`);
for (const n of document.querySelectorAll(selector)) {
n.textContent = n.textContent.replace(reg, '$1...');
}
<div>
<img>
</div>
div {
background: red;
display: inline-block;
}
img {
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
<input id="lower" type="number" value="100">
<input id="upper" type="number" value="200">
const lower = document.querySelector('#lower');
const upper = document.querySelector('#upper');
lower.addEventListener('input', function() {
this.value = Math.min(this.value, upper.value);
});
upper.addEventListener('input', function() {
this.value = Math.max(this.value, lower.value);
});
Можно сделать проверку после нажатия enter?
updateValueOnEnter(lower, val => Math.min(val, upper.value));
updateValueOnEnter(upper, val => Math.max(val, lower.value));
function updateValueOnEnter(input, f) {
input.addEventListener('keypress', ({ key, target: t }) => {
if (key === 'Enter') {
t.value = f(t.value);
}
});
}
this.rooms
- массив, объект, есть ли у него вложенные объекты? Раз уж решили не показывать, что это такое...this.rooms
попробовать присваивать JSON.parse(JSON.stringify(this.rooms))
(правда, если внутри есть методы, они отвалятся).this.rooms
использовать этот метод:methods: {
createRooms() {
return {
...
};
},
...
this.period[moment(itr.next().toDate()).format('YYYY-MM-DD')] = this.createRooms();
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<div id="app" :style="appStyle">
<transition name="route-change">
<router-view class="route"></router-view>
</transition>
</div>
const router = new VueRouter({
routes: [
[ '/', 'home', 'black' ],
[ '/xxx', 'hello, world!!', 'red' ],
[ '/yyy', 'fuck the world', 'green' ],
[ '/zzz', 'fuck everything', 'blue' ],
].map(([ path, text, color ]) => ({
path,
component: {
template: `<div style="background: ${color};">${text}</div>`,
},
})),
});
new Vue({
router,
el: '#app',
data: () => ({
routeIndex: 0,
}),
computed: {
appStyle() {
return {
height: `${100 * (this.$router.options.routes.length + 1)}vh`,
};
},
},
watch: {
routeIndex(val) {
const { $router } = this;
const { routes } = $router.options;
const index = Math.max(0, Math.min(routes.length - 1, val | 0));
$router.push(routes[index].path);
},
},
mounted() {
const onScroll = () => this.routeIndex = window.scrollY / window.innerHeight | 0;
onScroll();
window.addEventListener('scroll', onScroll);
},
});
html, body {
margin: 0;
}
.route {
width: 100vw;
height: 100vh;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
color: white;
font: bold 64px monospace;
transition: transform 0.2s ease-in;
}
.route-change-enter {
transform: translateX(100%);
}
.route-change-enter-to,
.route-change-leave {
transform: translateX(0);
}
.route-change-leave-to {
transform: translateX(-100%);
}
в shouldComponentUpdate nextState.items почему-то равно всегда this.state.items
let items = this.state.items;
items.push( undefined );
let items = [ ...this.state.items, undefined ]