<div class="product" v-for="item in poducts" :key="item.id">
<div class="product__name">{{ item.name }}</div>
<button @click="test(item.id)">кнопка</button>
</div>я про то как делается в инстаграм и т.д т.к все сразу показать это плохо
this // текущий input
.closest('tr')
.nextElementSibling
.querySelector('input.find-me-vue')
.focus()<input type="date" />HTMLInputElement.value // 2020-03-06
new Date(HTMLInputElement.value) // Date Fri Mar 06 2020 02:00:00 GMT+0200new Date(1583366400000) // Date Thu Mar 05 2020 02:00:00 GMT+0200
new Date("2020-03-05") // Date Thu Mar 05 2020 02:00:00 GMT+0200
new Date("05.03.2020") // Invalid Date<template>
<router-link :to="href" class="tabbar-item">
<div class="icon"><component :is="iconComponent"/></div>
<div class="view-name">{{ viewName }}</div>
</router-link>
</template>
<script>
export default {
props: ['iconName'],
computed () {
iconComponent() {
return import('@/components/icons/' + this.iconName)
}
}
}
</script>v-on:blurchange
<template>
<span>
<template v-slot:top>
<top-content />
</template>
<template v-slot:buttons>
<buttons />
</template>
<template v-slot:footer>
footer content
</template>
</span>
</template>redBackgrounds: function (state) {
return state.backgrounds // В этот момент Vue записывает state.backgrounds в зависимости для redBackgrounds
.filter(b => b === 'red') // Вычисляется и возвращается результат
}$store.getters.redBackgrounds // <-- Это свойство
/*
Функция которую мы писали выше будет запущена только один раз.
Её результат будет кэширован.
Кэш сбросится только в случае если одна из зависимостей, в нашем случае это state.backgrounds, изменится.
Тогда наша функция-геттер запустится снова, пересчитает значение и оно снова кэшируется.
*/showBackgrounds: function () {
return function () {} // <-- нет никаких зависимостей.
}