data: () => ({
sortBy: '',
...
}),
<v-btn @click="sortBy = 'имя_свойства_по_которому_надо_выполнить_сортировку'">click me</v-btn>
<v-data-table :sort-by.sync="sortBy">...</v-data-table>
data: () => ({
sortBy: [],
sortDesc: [],
...
}),
methods: {
sort(colName) {
const sameCol = this.sortBy[0] === colName;
const sortDesc = this.sortDesc[0];
this.sortBy = sameCol && sortDesc ? [] : [ colName ];
this.sortDesc = sameCol && sortDesc ? [] : [ sameCol ];
},
...
},
<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>
<v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc">...</v-data-table>
sort(colName) {
const index = this.sortBy.indexOf(colName);
if (index === -1) {
this.sortBy.push(colName);
this.sortDesc.push(false);
} else if (this.sortDesc[index]) {
this.sortBy.splice(index, 1);
this.sortDesc.splice(index, 1);
} else {
this.$set(this.sortDesc, index, true);
}
},
<v-btn @click="sort('имя_свойства_по_которому_надо_выполнить_сортировку')">click me</v-btn>
<v-data-table ref="table">...</v-data-table>
methods: {
sort(colName) {
const index = this.свойство_описывающее_столбцы_таблицы.findIndex(n => n.value === colName);
this.$refs.table.$el.querySelector('thead tr').cells[index].click();
},
...
},
const rows = [items.map(item => item)];
И как быть в случае подобных вложенностей, когда мне от объекта user нужен только его username?
Все делаю по образцу из официальной документации к Material
valueGetter: params => params.row.user.username
. import { yandexMap, ymapMarker, loadYmap } from 'vue-yandex-maps';
components: {
yandexMap,
ymapMarker,
},
data: () => ({
coords: null,
markers: [],
settings: { /* ... */ },
}),
methods: {
onClick(e) {
this.markers.push({
id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
coords: e.get('coords'),
});
},
},
async mounted() {
await loadYmap({ ...this.settings, debug: true });
ymaps.geolocation.get().then(res => {
this.coords = res.geoObjects.position;
});
},
<yandex-map
v-if="coords"
:coords="coords"
@click="onClick"
>
<ymap-marker
v-for="n in markers"
:key="n.id"
:marker-id="n.id"
:coords="n.coords"
></ymap-marker>
</yandex-map>
data: () => ({
items: [ ... ],
active: null,
}),
<v-xxx
v-for="(n, i) in items"
:показыватьДополнительныйКонтент="active === i"
@переключитьОтображениеДополнительногоКонтента="active = active === i ? null : i"
...
const xxx = Vue.observable({ active: null });
computed: {
показыватьДополнительныйКонтент() {
return xxx.active === this.какоеТоСвойствоСУникальнымЗначением;
},
},
<div v-if="показыватьДополнительныйКонтент">
...
</div>
methods: {
переключитьОтображениеДополнительногоКонтента() {
xxx.active = this.показыватьДополнительныйКонтент
? null
: this.какоеТоСвойствоСУникальнымЗначением;
},
},
<button @click="переключитьОтображениеДополнительногоКонтента">
{{ показыватьДополнительныйКонтент ? 'hide' : 'show' }}
</button>
newArr = list({ n[1]: n for n in array[::-1] }.values())
newArr = [ n for n in array if n == next(m for m in array if m[1] == n[1]) ]
const insert = (str, index, substr) =>
str.replace(RegExp(`(?<=.{${index}})`), substr);
// или
const insert = (str, index, substr) =>
str.replace(RegExp(`.{${index}}`), `$&${substr}`);
// или
const insert = (str, index, substr) =>
str.length >= index ? str.slice(0, index) + substr + str.slice(index) : str;
const counterSelector = 'селектор элементов внутри слайдов, где должны отображаться их номера';
document.querySelectorAll(counterSelector).forEach((n, i, a) => {
n.textContent = `${i + 1} / ${a.length}`;
});
const swiper = new Swiper(...);
), или среди его настроек отсутствует loop: true
. В противном случае для вычисления количества слайдов придётся отбросить дубликаты, а индексы надо будет доставать из data-атрибута (UPD. Неактуально, начиная с девятой версии - дублирования слайдов больше нет):const slidesCount = swiper
.slides
.filter(n => !n.matches('.swiper-slide-duplicate'))
.length;
swiper.slides.forEach(n => n
.querySelector(counterSelector)
.innerText = `${-~n.dataset.swiperSlideIndex} / ${slidesCount}`
);
<input type="radio" name="method" data-placeholder="hello, world!!">
<input type="radio" name="method" data-placeholder="fuck the world">
<input type="radio" name="method" data-placeholder="fuck everything">
const updatePlaceholder = (input, radio) =>
input.placeholder = radio.dataset.placeholder;
// или
// input.setAttribute('placeholder', radio.getAttribute('data-placeholder'));
// input.attributes.placeholder.value = radio.attributes['data-placeholder'].value;
document.addEventListener('change', ({ target: t }) => {
if (t.matches('input[name="method"]')) {
updatePlaceholder(t.closest('form').querySelector('[name="wallet"]'), t);
}
});
const onChange = ({ target: t }) =>
updatePlaceholder(t.form.elements.wallet, t);
for (const form of document.forms) {
for (const radio of form.elements.method) {
radio.addEventListener('change', onChange);
}
}
$.param($(this).serializeArray().filter(n => +n.value && n.name !== 'mode'))
function plainArray($arr, $keys = []) {
$result = [];
foreach ($arr as $k => $v) {
$keys[] = $k;
$result += is_array($v)
? plainArray($v, $keys)
: [ implode('__', $keys) => $v ];
array_pop($keys);
}
return $result;
}
arr = string.split('|')
arr[1], arr[2] = arr[2], arr[1]
newString = '|'.join(arr)
import re
newString = re.sub(r'(\|\d+)(\|\d+)', r'\2\1', string, 1)
return {
...state,
plans: state.plans.map(n => {
const item = n.find(m => m.id === action.id);
return item
? n.map(m => m === item ? { ...m, value: action.value } : m)
: n;
}),
};