v-for
, которому будет передаваться массив с данными. Блок базовой комплектации примет примерно такой вид:baseOptions: [
{ name: 'Свойство 1', price: 10000 },
{ name: 'Свойство 2', price: 11000 },
...
<ul>
<li v-for="n in baseOptions">{{ n.name }} ({{ n.price }})</li>
</ul>
v-model
):extraOptions: [
{ name: 'Пакет 1', price: 16000, checked: false },
{ name: 'Пакет 2', price: 17000, checked: false },
...
<div v-for="n in extraOptions">
<input type="checkbox" v-model="n.checked">
<label>{{ n.name }}</label>
</div>
methods: {
sum: arr => arr.reduce((acc, n) => acc + n.price, 0),
computed: {
baseSum() {
return this.sum(this.baseOptions);
},
extraSum() {
return this.sum(this.extraOptions.filter(n => n.checked));
},
filters: {
price: val => `${val.toLocaleString()} р.`,
<span>{{ baseSum | price }}</span>
<span>{{ extraSum | price }}</span>
<gmap-info-window
:options="infoOptions"
:position="infoWindowPos"
:opened="infoWinOpen"
@closeclick="infoWinOpen = false"
>
{{ infoContent }}
</gmap-info-window>
onMarkerClick(e) {
this.infoWindowPos = e.latLng; // задаём положение окна, над кликнутым маркером
this.infoContent = JSON.stringify(e.latLng); // задаём контент окна, передаётся в слот
this.infoWinOpen = true; // открываем окно
},
if (counting >= 10) { level++; counting = 0;
function getScore(arr) {
const points = [ 0, 40, 100, 300, 1200 ];
let score = 0;
let lines = 0;
for (const n of arr) {
score += points[n] * (1 + (lines / 10 | 0));
lines += n;
}
return score;
}
$('.away-players').text(function(i, text) {
return $('.subs-players td:even')
.get()
.map(n => $(n).text().split(', '))
.reduce((text, n) => text.replace(n[1], `(${n.join(' ')})`), text);
});
Количество LI элементов заранее не известно, поэтому выполнять функцию WHEN с определенным количеством аргументов нет возможности.
$.when(...$('li').get().map(n => $.ajax())).then(/* выполняйте, чо там вам надо */);
this.data = new Proxy(...
сделайтеreturn new Proxy(this, {
get(target, name) {
return name in target
? target[name]
: `Свойства ${name} нет`
},
});
created() {
const onClickOutside = e => this.opened = this.$el.contains(e.target) && this.opened;
document.addEventListener('click', onClickOutside);
this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},
for (const [ k, v ] of new URLSearchParams(url.replace(/.*\?/, ''))) {
document.querySelector(`#${k}`).value = v;
}
url
.slice(url.indexOf('?') + 1)
.split('&')
.map(n => n.split('='))
.forEach(n => document.getElementById(n[0]).value = n[1]);
const data = [...url.split('?').pop().matchAll(/([^&]+)=([^&]*)/g)];
for (let i = 0; i < data.length; i++) {
document.querySelector(`[id="${data[i][1]}"]`).value = data[i][2];
}
const getMonthName = iMonth =>
new Date(0, iMonth).toLocaleString('ru-RU', { month: 'long' });
computed: {
groupedByMonth() {
return this.items.reduce((acc, n) => {
const key = getMonthName(n.date.split('-')[1] - 1);
(acc[key] = acc[key] || []).push(n);
return acc;
}, {});
},
},
<ul>
<li v-for="(items, month) in groupedByMonth" :key="month">
<h3>{{ month }}</h3>
<ul>
<li v-for="n in items" :key="n.id">{{ n }}</li>
</ul>
</li>
</ul>
groupedByMonth() {
return this.items.reduce((acc, n) => {
acc[n.date.split('-')[1] - 1].items.push(n);
return acc;
}, Array.from({ length: 12 }, (_, i) => ({
month: getMonthName(i),
items: [],
})));
},
<ul>
<li v-for="{ items, month } in groupedByMonth" :key="month">
<h3>{{ month }}</h3>
<ul v-if="items.length">
<li v-for="n in items" :key="n.id">{{ n }}</li>
</ul>
<div v-else>данных нет</div>
</li>
</ul>
import router from './router.js';
const url = `/api/photos?${в зависимости от router.currentRoute}=true&page=${list}&limit=15`;
<gmap-map
ref="map"
v-bind="options"
@click="onMapClick"
>
<gmap-marker
v-for="m in markers"
:key="m.id"
:position="m.position"
:clickable="true"
:draggable="true"
@click="onMarkerClick"
/>
</gmap-map>
data: () => ({
options: {
center: { lat: 45.101637, lng: 38.986345 },
zoom: 15,
},
markers: [],
}),
methods: {
onMapClick(e) {
this.markers.push({
id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
position: e.latLng,
});
},
onMarkerClick(e) {
this.$refs.map.panTo(e.latLng);
// или
// this.options.center = e.latLng;
},
},
.hover {
opacity: 0.5;
}
const map = document.querySelector('.map svg');
map.addEventListener('mouseover', onHover);
map.addEventListener('mouseout', onHover);
function onHover({ target: t }) {
this.querySelectorAll('.hover-effect').forEach(n => {
n.classList.toggle('hover', n !== t && this !== t);
});
}
.map:hover .hover-effect {
opacity: 0.5;
}
.map:hover .hover-effect:hover {
opacity: 1;
}
Если выводить в консоль то коллекции не чем не отличаются.
HTMLCollection
, хранящая элементы DOM, является динамической. При изменении документа она моментально отражает все произведённые изменения.
// вариант раз - меняем направление обхода, от конца к началу:
for (let i = elements.length; i--;) {
elements.item(i).replaceWith();
}
// вариант два - удаляем нулевой элемент коллекции, пока он существует:
for (let n; n = elements[0]; n.remove()) ;
foreach ($array as [ 'id' => $id, 'taste' => $taste ]) {
$result[$id][$taste] = 1 + ($result[$id][$taste] ?? 0);
}