data: () => ({
size: ...
}),
watch: {
size: {
immediate: true,
handler(val) {
fontSize(this.target, val);
},
},
},<input type="range" v-model="size">methods: {
onInput(e) {
fontSize(this.target, e.target.value);
},
},
mounted() {
this.$el.querySelector('input').dispatchEvent(new Event('input'));
},<input type="range" @input="onInput">
<input ref="datepicker" v-model="item.date">watch: {
items() {
this.$nextTick(() => {
this.$refs.datepicker
.filter(n => !n.classList.contains('hasDatepicker'))
.forEach(n => $(n).datepicker({
onSelect: () => n.dispatchEvent(new Event('input')),
}));
});
},
},<input v-datepicker v-model="item.date">Vue.directive('datepicker', {
inserted: el => $(el).datepicker({
onSelect: () => el.dispatchEvent(new Event('input')),
}),
});<v-datepicker v-model="item.date"></v-datepicker>Vue.component('v-datepicker', {
template: `<input :value="value" readonly="readonly">`,
props: [ 'value' ],
mounted() {
$(this.$el).datepicker({
onSelect: date => this.$emit('input', date),
});
},
});:src="`/img/${imgName}.jpg`":src="'/img/' + imgName + '.jpg'"computed: {
imgSrc() {
return `/img/${this.imgName}.jpg`;
},
},:src="imgSrc"methods: {
imgSrc: name => `/img/${name}.jpg`,
},:src="imgSrc(imgName)"
Но как снять эту прослушку потом в unbind?
bind(el, options) {
const handler = () => { ... };
window.addEventListener('scroll', handler);
el.scrollHandler = handler;
},
unbind(el) {
window.removeEventListener('scroll', el.scrollHandler);
},const map = new Map();
window.addEventListener('scroll', function(e) {
[...map.entries()].forEach(([ el, { className, deleteClass } ]) => {
...
});
});bind(el, options) {
map.set(el, {
className: options.value,
deleteClass: options.arg === 'delete',
});
},
unbind(el) {
map.delete(el);
},v-model="searchRegion"v-model="country.searchRegion"
data: () => ({
width: 0,
}),
created() {
const onResize = () => this.width = window.innerWidth;
onResize();
window.addEventListener('resize', onResize);
this.$on('hook:beforeDestroy', () => window.removeEventListener('resize', onResize));
},data: () => ({
isWidthOK: false,
}),
created() {
const mql = window.matchMedia('(max-width: 600px)');
const onChange = () => this.isWidthOK = mql.matches;
onChange();
mql.addEventListener('change', onChange);
this.$on('hook:beforeDestroy', () => mql.removeEventListener('change', onChange));
},watch: {
'getSelectedEvent.mediaUrl'(val) {
const img = new Image();
img.onload = () => this.checkExistImages = img.height > 0;
img.onerror = () => this.checkExistImages = false;
img.src = val;
},
},<div id="app">
<div v-if="!images.length">
<h2>Select an images</h2>
<input type="file" @change="onFileChange" multiple>
</div>
<div v-else>
<div v-for="(image, i) in images">
<img :src="image" />
<button @click="removeImage(i)">Remove image</button>
</div>
</div>
</div>new Vue({
el: '#app',
data: {
images: [],
},
methods: {
onFileChange(e) {
this.createImages(e.target.files || e.dataTransfer.files);
},
createImages(files) {
[...files].forEach(file => {
const reader = new FileReader();
reader.onload = e => this.images.push(e.target.result);
reader.readAsDataURL(file);
});
},
removeImage(index) {
this.images.splice(index, 1);
},
},
});пишет что такой компонент не зарегистрирован
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)"