<table>
<thead>
<tr>
<th v-for="day in nameOfDays">{{ day }}</th>
</tr>
</thead>
<tbody>
<tr v-for="week in getCalendar">
<td v-for="day in week" class="day">{{ day }}</td>
</tr>
</tbody>
</table>.day:hover {
background: red;
color: white;
}как числа которые относятся к прошлому и будущему месяцу сделать серыми а не черными в отличии чисел нынешнего месяца?
<tr v-for="(week, i) in getCalendar">
<td v-for="day in week" :class="classes(i, day)">{{ day }}</td>
</tr>methods: {
classes(week, day) {
return [
'day',
((!week && day > 7) || (week > 2 && day < 7)) && 'other-month',
];
},
....other-month {
...:disabled="currentPage === 0"if(this.currentPage % 11 == 0){if(this.currentPage+1 % 11 == 0){this.currentPage == 11;this.currentPage == 0;подскажите пожалуйста что я неправильно делаю
<ui-icon
iconSet="ico-moon"
data-icon="i-more"
@click="stage.show = !stage.show"
><div
class="opportunity-board__list"
v-show="stage.show"
>s-switch(@switch="switch")this.switch.
row.toggleDetails в качестве обработчика клика, можно завернуть его в метод, который будет принимать row и проверять наличие дополнительной информации, инициируя её подгрузку в случае отсутствия. Например (вместо запроса setTimeout, но думаю, что суть ясна).
model: {
prop: 'checked',
},
props: {
value: [ String, Number ],
checked: [ Boolean, Array ],
label: String,
disabled: Boolean,
},
computed: {
model: {
get() {
return this.checked;
},
set(val) {
this.$emit('input', val);
},
},
},<label>
<input
type="checkbox"
v-model="model"
:value="value"
:disabled="disabled"
/>
{{ label }}
</label>animated: false на animated: Array(6).fill(false).<div
v-for="n in animated"
:class="{ animated: n }"
...this.$refs.animate.forEach((n, i) => new Waypoint.Inview({
element: n,
entered: () => this.$set(this.animated, i, true),
exited: () => this.$set(this.animated, i, false),
}));state: {
wishlistIds: [],
...plugins: [
createPersistedState({
paths: [ 'wishlistIds' ],
}),
...getters: {
wishlist: state => state.games.filter(n => state.wishlistIds.includes(n.id)),
...mutations: {
addGame(state, gameId) {
if (!state.wishlistIds.includes(gameId)) {
state.wishlistIds.push(gameId);
}
},
removeGame(state, gameId) {
const index = state.wishlistIds.indexOf(gameId);
if (index !== -1) {
state.wishlistIds.splice(index, 1);
}
},
...computed: {
liked: {
get() {
return this.$store.state.wishlistIds.includes(this.game.id);
},
set(val) {
this.$store.commit(val ? 'addGame' : 'removeGame', this.game.id);
},
},
...<button @click="liked = !liked" :class="{ liked }" class="like"></button>import chartist from 'chartist';VueChartist.Interpolation.simple()chartist.Interpolation.simple()
каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка
<h1>{{ $route.meta.title }}</h1>
data: () => ({
filters: [ 'ArmorProtective_LowerBody', 'ArmorProtective_Head' ],
activeFilter: null,
...
computed: {
filteredHeads() {
const f = this.activeFilter;
return f
? this.heads.flatMap(n => n[f]).filter(Boolean)
: [];
},
...<a v-for="f in filters" @click="activeFilter = f">{{ f }}</a>
...
<div v-for="head in filteredHeads">
...emit из дочернего компонента, v-on из родительского. Параметр list - заменить статическую передачу значения на динамическую: :list="{{ json_encode($tasks) }}". Так переданное значение будет рассматриваться не как строка, а в качестве javascript выражения - применять JSON.parse не нужно.
ol на transition-group:<transition-group tag="ol" name="todo">
<li
v-for="(todo, i) in todos"
:key="todo.id"
@click="todos.splice(i, 1)"
>{{ todo.text }}</li>
</transition-group>li {
transition: all 0.7s;
}
.todo-leave-active {
position: absolute;
}
.todo-leave-to {
transform: translateX(500px);
opacity: 0;
}:class="{ 'authorization__label--done': name }"
:class="{ 'authorization__label--done': password }"в product.vue делаю при клике <...> в product.vue все норм выводит, в shop.vue hover = null