Можно как-то в зависимости от даты отсортировать данные из массива по этим блокам?
То есть в блок "Сегодня" уходит 2018-05-28
В блок "Вчера" 2018-05-27
data: () => ({
entity: [
{ id: 1, name: 'title', value: 'default title' },
{ id: 2, name: 'address', value: 'default address' },
],
}),
computed: {
item() {
return this.entity.reduce((acc, n) => (acc[n.name] = n.value, acc), {});
},
},<div v-for="n in entity" :key="n.id">
<label>
{{ n.name }}
<input type="text" v-model="n.value">
</label>
</div>На div с id 98 и 99 клик работает
greet: function () { alert('Привет!'); }
когда делаю так
template: '<div class = "brick" v-on:click="greet">{{ brick.text }}</div>'
выдает ошибку реактивности
<brick-item @click.native="greet" ...<div @click="$emit('click')" ...<div @click="$listeners.click" ...<div v-on="$listeners" ...
А можно регулировать масштаб? Сейчас максимально приближено. Можно установить значение zoom 15, например?
const random = {
intFromInterval: (min, max) => Math.floor(Math.random() * (max - min)) + min,
intFromZero: (max) => Math.floor(Math.random() * max),
};
console.log(random.intFromInterval(55, 66));Array.prototype.forEach.call(cards, function(cardDiv) {
// ...
});for (var i = 0; i < cards.length; i++) {
var cardDiv = cards[i];
// ...
}this.array.push('hello'). Вместо этого делайте this.array = [ ...this.array, 'hello' ].this.obj.prop = value будет this.obj = { ...this.obj, prop: value }.watch: { array: function (o, n) { this.oldData = o this.newData = n } }
Первое что приходит в голову это создать блоки нужного размера и настроить позицию фона.
Но что-то мне подсказывает, что это не лучшее решение
Как бы вы это сделали с позиции проектирования и производительности?
Никогда не имел дела с Canvas, насколько я понимаю, он тут тоже может помочь
Использую карусель vue-slick...
Есть кнопка "добавить слайд", после которой нужно "перезапустить" слайдер. <...> Пробую использовать в методе добавления слайда this.$refs.slick.$reSlick(), ничего не получается.$refs.slick.destroy; затем изменение данных, на основе которых строится разметка слайдов; и наконец, вызов $refs.slick.create, обёрнутый в $nextTick.
нужно вращать сначала медленно, потом быстро, потом опять медленно
class App extends React.Component {
state = {
selected: {},
groups: [
[
[ 'value_a1', 'value_a2', 'value_a3' ],
[ 'value_b1', 'value_b2', 'value_b3' ],
[ 'value_c1', 'value_c2', 'value_c3' ],
],
[
[ 'value_a1', 'value_b1', 'value_c1' ],
[ 'value_a2', 'value_b2', 'value_c2' ],
[ 'value_a3', 'value_b3', 'value_c3' ],
],
],
}
onChange = (e, groupIndex, itemIndex) => {
const selectedGroup = this.state.groups[groupIndex][itemIndex];
const selectedInfo = this.state.selected[groupIndex] || [];
this.setState({
selected: {
...this.state.selected,
[groupIndex]: e.target.checked
? selectedInfo.concat(selectedGroup)
: selectedInfo.filter(n => !selectedGroup.includes(n))
},
});
}
render() {
const { selected, groups } = this.state;
const matched = (selected[0] || []).filter(n => {
return groups.every((group, i) => (selected[i] || []).includes(n));
});
return (
<div>
{groups.map((group, groupIndex) => (
<ul>
{group.map((item, itemIndex) => (
<li>
<input
type="checkbox"
onChange={(e) => this.onChange(e, groupIndex, itemIndex)}
/>
{item.map(val => <span>{val}</span>)}
</li>
))}
</ul>
))}
<div>
{matched.map(val => <span>{val}</span>)}
</div>
</div>
);
}
}computed: {
routeAnimation() {
return что-то, зависящее от this.$route;
},
},<transition :name="routeAnimation">
<div :key="routeAnimation"></div>
</transition>this.renderer.createElement('svg');this.renderer.createElement('svg', 'svg');this.renderer.createElement('circle');this.renderer.createElement('circle', 'svg');
Мне этот механизм не понятен.
Как это можно понять, это документированная возможность?
Comment - судя по имени и по коду, он должен рендерить один комментарий, а у вас массив. Наверное, тут нужен ещё один компонент - список комментариев.const Comment = ({ general, job, address }) => (
<li>
<div>first name: {general.firstName}</div>
<div>last name: {general.lastName}</div>
<div>company: {job.company}</div>
<div>address: {address.country}, {address.city}, {address.street}</div>
</li>
);
const CommentList = ({ comments }) => (
<ul>
{comments.map(n => <Comment {...n} />)}
</ul>
);
ReactDOM.render(
<CommentList comments={comments} />,
document.getElementById('root')
);$('.button').click(function() {
const $this = $(this);
const $content = $this.closest('.item').find('.block');
if ($this.hasClass('closed')) {
$this.removeClass('closed').html('Скрыть ↑');
$content.slideDown();
} else {
$this.addClass('closed').html('Показать ↓');
$content.slideUp();
}
}).click();