getMaxQuestionsLeft(question, depth) {
return Math.max(
depth,
...question.nextQuestions.map(n => {
return this.getMaxQuestionsLeft(this.questions[n], depth + 1);
})
);
},
get progress() {
const ac = this.answersCount;
return Math.floor(ac / (ac + this.getMaxQuestionsLeft(this.question, 0)) * 100);
},get maxQuestionsLeft() {
let result = 0;
for (const stack = [ [ this.question, 0 ] ]; stack.length;) {
const [ q, d ] = stack.pop();
result = Math.max(result, d);
stack.push(...q.nextQuestions.map(n => [ this.questions[n], -~d ]));
}
return result;
},
get progress() {
const { answersCount: ac } = this;
return ac / (ac + this.maxQuestionsLeft) * 100 | 0;
},history: createMemoryHistory(),Vue-router не изменяет url страницы
The memory history mode doesn't assume a browser environment and therefore doesn't interact with the URL
const status = defineModel('status');
const statuses = [ 'all', 'alive', 'dead', 'unknown' ];<select v-model="status">
<option v-for="n in statuses">{{ n }}</option>
</select>defineProps({
data: {
type: Array,
default: () => [],
},
});<div v-for="n in data">
<span :class="[ 'status', n.status ]"></span>
...
</div>.status {
border-radius: 50%;
width: 30px;
height: 30px;
&.alive { background: green; }
&.dead { background: red; }
&.unknown { background: orange; }
}const data = ref([ ... ]);
const status = ref('all');
const filteredData = computed(() => status.value === 'all'
? data.value
: data.value.filter(n => n.status === status.value)
);<FilterBlock v-model:status="status" />
<CardList :data="filteredData" />key при переборе pfor...inundefined (ну, так язык устроен). Т.е., массива строк у вас нет. Массив строк - это когда всё его содержимое является строками. Откуда в массиве взялись undefined (да, у вас их там несколько)? Цикл for...in обрабатывает не только собственные свойства объектов, но и те, что доступны через цепочку прототипов. Значения которых уже не являются элементами и, соответственно, не имеют запрашиваемого вами свойства textContent. Раз свойства нет, получаете undefined.const getText = el => el.textContent;), чтобы туда не попадал всякий мусор - лучше бы вообще отказаться от применения for...in, варианты разные есть:const list = Array.from(p, getText);
// или
const list = Array.prototype.map.call(p, getText);
// или
const list = [];
for (const n of p) {
list.push(getText(n));
}
// или
const list = [];
for (let i = 0; i < p.length; i++) {
list[i] = getText(p[i]);
}
// или
const list = [];
p.forEach((n, i) => list.splice(i, 0, getText(n)));for...in, то прежде чем что-то делать с конкретным свойством, убедитесь, что оно является собственным, методы Object.hasOwn и Object.prototype.hasOwnProperty вам в этом помогут.
def unique_with_sum(arr, id_key, sum_key):
unique = {}
for n in arr:
unique.setdefault(n[id_key], { **n, sum_key: 0 })[sum_key] += n[sum_key]
return [*unique.values()]
result = unique_with_sum(arr, 'uid_1c', 'amount')BREAKING: When used on custom components,v-modelprop and event default names are changed:
- prop:
value->modelValue;- event:
input->update:modelValue;
const getWeekdaysOfMonth = (year, month) =>
Array.from(
{ length: new Date(year, month, 0).getDate() },
function() {
this[0].setDate(-~this[0].getDate());
this[1] += this[0].getDay() === 1 || !this[1];
return `неделя ${this[1]}, ` + this[0].toLocaleString('ru-RU', {
day: 'numeric',
weekday: 'short',
});
},
[ new Date(year, ~-month, 0), 0 ]
);
const may2024 = getWeekdaysOfMonth(2024, 5);
const sep2023 = getWeekdaysOfMonth(2024, -3);
const jun2021 = getWeekdaysOfMonth(2020, 18);unshift, и ничего больше). Давайте закостылим - добавляем колонку, которая будет дублировать данный функционал, а оригинальную спрячем:const columns = [
...
{ name: 'selection' },
];.xxx tr > :first-child {
display: none;
}<q-table
...
table-class="xxx"
>
<template #header-cell-selection="props">
<q-th :props="props">
<q-checkbox v-model="props.selected" />
</q-th>
</template>
<template #body-cell-selection="props">
<q-td :props="props">
<q-checkbox v-model="props.selected" />
</q-td>
</template>
</q-table>.btn::after {
transition-duration: 1s;
...
}.btn:hover::after {
transform: translateX(30px) translateY(-40px);
}.then( (x) => x + 1, (x) => x + 3 ) //promise rejected, value = 14
.then((x) => x * 20).
every для пустого массива?||?
.waiting { background: yellow; }
.working { background: green; }
.completed { background: blue; }const highlight = {
'Ожидание': 'waiting',
'Работа': 'working',
'Завершено': 'completed',
};<el-table-column label="Процесс">
<template #default="{ row: { process } }">
<span :class="highlight[process]">{{ process }}</span>
</template>
</el-table-column>const cellClassName = ({ column, row }) =>
column.property === 'process'
? (highlight[row.process] ?? '')
: '';<el-table
:cell-class-name="cellClassName"
...
>prefix-icon="calendar-icon"function combine($ids, $keys, ...$values) {
return array_combine(
$ids,
array_map(
fn($i) => array_combine($keys, array_column($values, $i)),
array_keys($ids)
)
);
}
$result = combine($input, $params, $array1, $array2);