import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// mix the getters into computed with object spread operator
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
},
watch: {
doneTodosCount(newVal, oldVal) {
if (newVal !== oldVal && newVal) {
alert('!!!');
}
},
},
}
<map> - htmlbook.ru/html/map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<container>
<child class="small">
<content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
</child>
<child class="big">
<content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio
qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio
qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
</child>
<child class="small">
<content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
</child>
<child class="small">
<content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
</child>
</container>
</body>
</html>container {
display: block;
background: yellow;
width: 200px;
padding: 30px 0;
}
child {
position: relative;
display: block;
width: 110px;
height: 50px;
background: red;
margin: 0 auto 10px;
}
child:last-child {
margin: 0 auto;
}
content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 9px;
}
.big content {
transform: scale(1, 0.5);
transform-origin: top left;
}
У нас как раз так и реализовано. Все страницы забираются через api и хранятся в нашей ЦМС. В самой тильде есть html-вставки, туда то мы и вставляем все что нам нужно.
Сначала вставляли через SSI (формы, баннеры, виджеты), теперь у нас на сайте есть Vue, поэтому все это дело переехало на vue-компоненты...
Ну и естественно всяческие формы обрабатываются нашим бекэндом.