Как правило, все плагины работают от обратного - у них есть возможность передать массив только с неактивными датами.
config.enable.дата => массив.includes(дата.toLocaleDateString()):disbaledDates.customPredictor.beforeShowDay.
<slot name="placeholder"></slot><template #placeholder>
<option value="" disabled>давай, выбирай</option>
</template>watch: {
alias: {
immediate: true,
handler: 'getArticles',
},
},function onClick({ currentTarget: t }) {
const className = t.dataset.activeClass;
document.querySelector(`.${className}`)?.classList.remove(className);
t.classList.add(className);
}
Vue.directive('active-class', {
bind(el, binding) {
el.dataset.activeClass = binding.value;
el.addEventListener('click', onClick);
},
update(el, binding) {
el.dataset.activeClass = binding.value;
},
unbind(el) {
delete el.dataset.activeClass;
el.removeEventListener('click', onClick);
},
});<div v-active-class="'buy-voucher__amount_selected'">
<input v-active-class="'buy-voucher__amount_selected'">router-view не забыли добавить?
provide() {
return {
treeRoot: this,
};
},inject: [ 'treeRoot' ],@click="treeRoot.$emit('item-click', item)"methods: {
onItemClick(item) {
// ...
},
},@item-click="onItemClick"
<div ref="map"></div>data: () => ({
coords: [ ... ],
}),
methods: {
initMap() {
this.map = new ymaps.Map(this.$refs.map, {
center: this.coords,
zoom: 8,
});
this.marker = new ymaps.Placemark(this.coords, {
hintContent: 'hello, world!!',
});
this.map.geoObjects.add(this.marker);
this.map.events.add('click', this.onMapClick);
this.$watch('coords', this.updateMap);
},
onMapClick(e) {
this.coords = e.get('coords');
},
updateMap() {
this.map.panTo(this.coords);
this.marker.geometry.setCoordinates(this.coords);
},
},
created() {
ymaps.ready(this.initMap);
},methods: {
setDeleteTimeout(message) {
message.timeout = setTimeout(this.удалитьСообщение, 5000, message);
},
delDeleteTimeout(message) {
clearTimeout(message.timeout);
message.timeout = null;
},
...<div
v-for="n in messages"
@mouseenter="delDeleteTimeout(n)"
@mouseleave="setDeleteTimeout(n)"
...если я ставлю параметр :interval="100", то у меня появляется черная полоса под слайдером и все начинает очень лагать
methods: {
marks: v => !(v % 20000),
...<vue-slider
:marks="marks"
...<apexchart
ref="chart"
...mounted() {
this.$nextTick(() => {
this.$refs.chart.hideSeries('здесь имя набора данных, который не хотите показывать');
});
},Components can recursively invoke themselves in their own template. However, they can only do so with the name option
watch: {
данные: {
immediate: true,
handler(value) {
if (value какой нужен) {
делаете чего там вам надо
}
},
},
},computed: {
данные() {
return [ this.данные1, this.данные2, /* ... */ ];
},
},
watch: {
данные: {
immediate: true,
handler(value) {
if (value.every(n => n какой нужен)) {
делаете чего там вам надо
}
},
},
},app.directive(directives);почему-то в данные изменение попадает только после nextTick'а (т.е. когда что-то побуждает родительский компонент перерисоваться)
Важное замечание о времени регистрации ссылок: поскольку ссылки создаются render-функцией, вы не сможете использовать их при первичной отрисовке — на тот момент они ещё не существуют! Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.