const blocks = ref(Array.from({ length: 5 }, (_, i) => (-~i) ** 2));
const active = ref(0);
function next() {
active.value = (active.value + 1 + blocks.value.length) % blocks.value.length;
}
let intervalId = null;
onMounted(() => intervalId = setInterval(next, 500));
onUnmounted(() => clearInterval(intervalId));<div
v-for="(n, i) in blocks"
v-text="n"
:class="[ 'box-item', { active: i === active } ]"
></div>:nth-child - не круто. Лучше сделать компонент, принимающий массив цветов и создающий блоки на его основе. Соответственно, вместо класса будет назначаться цвет фона напрямую, как-то так:<div
v-for="(n, i) in colors"
:style="{ backgroundColor: i === active ? n : '' }"
...
v-for="(address, i) in form.addresses_to" :key="i"всегда удаляется последний
Vue использует алгоритм, минимизирующий перемещение элементов
scoped стилей: переданный внутрь класс не будет работать сам по себе, т.к. привязан к scope родительского компонента, придётся использовать псвевдоселектор :deep(), а это уже чревато коллизиями.
type:type BaseColumn = { label: string; props: string }
type Column = { type: 'text' } & BaseColumn
type LinkColumn = { type: 'link'; path: string } & BaseColumn
type TableColumn = Column | LinkColumnkeyof для юниона объектов показывает только те поля, которые есть в каждом из них. Это логично, т.к. к типу TableColumn ты не можешь обратиться по полую .link предварительно не сузив тип. union - строгий. 
// Не пишите тут лишних типов. Юзаете картинку, оставьте только тип картинки
const img = ref<HTMLImageElement | null>(null);if (img.value) {
observer.value.observe(img.value);
}ref на какой либо DOM элемент или же компонент, это не значит, что он существует в DOM дереве. TS не умеет определять, существует ли html или нет.
const trigger = ref(false) //for watch
function somePiniaAction() {
var1.value = "1"
var2.value = "2"
var3.value = "3"
trigger.value = !trigger.value
}
Что надо делать.?
Не понимаю, с чего начать.
double[] x, double[]y
position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.position: absolute.
// get DOM elements
const searchInput = document.getElementById('searchInput');
const resultsContainer = document.getElementById('resultsContainer');
// search from array
function searchBooks(query) {
return CLASS5.filter(book => {
return book.query.toLowerCase().includes(query.toLowerCase())
|| book.athor.toLowerCase().includes(query.toLowerCase())
|| book.pages.toLowerCase().includes(query.toLowerCase())
|| book.age.toLowerCase().includes(query.toLowerCase())
|| book.classn.toLowerCase().includes(query.toLowerCase());
});
}
// print
function displayResults(results) {
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
return;
}
results.forEach(book => {
const bookCard = document.createElement('div');
bookCard.innerHTML = `
<h2>${book.query}</h2>
<p>${book.athor}</p>
<p>${book.pages}</p>
<p>${book.age}</p>
<p>${book.classn}</p>
<img src="${book.images}" alt="Book Image">
`;
resultsContainer.appendChild(bookCard);
});
}
// handler
searchInput.addEventListener('input', (event) => {
const query = event.target.value;
const results = searchBooks(query);
displayResults(results);
});
Или например при выполнении скрипта на бэке записывать в базу результат а фронт будет через 5 минут спрашивать бэк все ли готово?