rcs.forEach((residential, i) => {
...
/*
* никакого this при создании попапов не надо - какой смысл делать свойством
* компонента один из многих попапов (т.к. тут цикл, новая итерация - новый
* попап, в результате будет сохранён последний созданный)?
*
* то же касается и координат маркера ниже
*/
const popup = DG.popup({
...
setTimeout(() => {
DG.marker([ residential.latitude, residential.longitude ], { icon: myDivIcon })
.addTo(this.markers)
.bindPopup(popup);
}, i * 200);
});
<a
v-for="city in cities"
@click="selectedCity = city.name"
class="dropdown-button__item dropdown-item"
>{{ city.name }}</a>
computed: {
maps() {
return (this.cities.find(n => n.name === this.selectedCity) || {}).transport;
},
},
<div class="how-to-get__map-wrap" v-if="maps">
<iframe v-for="map in maps" :src="map.mapLink" frameborder="0" allowfullscreen="true"></iframe>
</div>
Чекбоксы кастомные и при втором клике на один из них - они полностью игнорируют свойства checked и disabled
:href="`https://oauth.vk.com/authorize?client_id=${client_id}`"
computed: {
href() {
return `https://oauth.vk.com/authorize?client_id=${this.client_id}`;
},
},
:href="href"
methods: {
href: client_id => `https://oauth.vk.com/authorize?client_id=${client_id}`,
},
:href="href(client_id)"
data: () => ({
values: [ 0, 14235534, 53423, -9678953, 3451, 5323467445, -123456 ],
}),
filters: {
format1: val => `${val}`.replace(/(\d)(?=(\d{3})+([^\d]|$))/g, '$1 '),
},
methods: {
format2: val => val.toLocaleString('ru-RU'),
},
computed: {
formatted() {
return this.values.map(n => {
const sign = Math.sign(n) === -1;
const arr = [...String(Math.abs(n))].reverse();
return (sign ? '-' : '') + Array.from(
{ length: Math.ceil(arr.length / 3) },
(n, i) => arr.slice(i * 3, (i + 1) * 3).reverse().join('')
).reverse().join(' ');
});
},
},
<div>
<div v-for="n in values">{{ n | format1 }}</div>
</div>
<div>
<div v-for="n in values">{{ format2(n) }}</div>
</div>
<pre>{{ formatted }}</pre>
v-model="answers[questionIndex]"
computed: {
answerSelected() {
return this.answers[this.questionIndex].length;
},
},
:disabled="!answerSelected"
А можете подсказать, как в результат вывести не только отмеченные поля, но на какой вопрос были эти поля отмечены?
router-view
. Где он? Должен быть. Надо добавить..header
?) должна быть доступна везде - её можно вынести в компонент App (в котором следует разместить router-view
).router-link
вы в качестве id используете индекс? Вместо<router-link :to="{ name: 'detail', params: {id: index} }">
<router-link :to="{ name: 'detail', params: { id: post.id } }">
$route.params.id
, в котором выполнять запрос на получение данных поста. Выглядеть это может как-то так:data: () => ({
post: null,
}),
watch: {
'$route.params.id': {
immediate: true,
handler(id) {
axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`).then(r => this.post = r.data);
},
},
},
@scroll="onScroll"
methods: {
onScroll(e) {
if (e.target.offsetHeight + e.target.scrollTop >= e.target.scrollHeight) {
// ...
}
},
e.target.scrollHeight - расстояниеДоНижнейГраницы
).this.map.closePopup()
.А если открыты несколько попапов разных маркеров? <...> как можно открыть необходимый попап маркера (без нажатия на сам маркер конечно)
<button @click="onClick(product)">click me</button>
methods: {
onClick(item) {
console.log(item.title);
},
},
this.message = this.rules.map(n => n(this.input)).find(n => n !== true);
zoom(change) {
this.map.setZoom(this.map.getZoom() + change);
},
<div @click="zoom(+1)">zoom in</div>
<div @click="zoom(-1)">zoom out</div>
@click="$emit('remove')"
.@remove="removeFromBasket(item)"
. computed: {
declarantKind() {
return this.dsec.reduce((acc, n) => (
acc[n.dsec_nnn] = n.dsec_declarant_kind,
acc
), {});
},
},
watch: {
declarantKind(newVal, oldVal) {
const [ key ] = Object
.entries(newVal)
.find(([ k, v ]) => oldVal.hasOwnProperty(k) && oldVal[k] !== v) || [];
if (key) {
const item = this.dsec.find(n => n.dsec_nnn === key);
console.log('объект:', item);
console.log(`было: ${oldVal[key]}`);
console.log(`стало: ${newVal[key]}`);
}
},
},