function (response) {
на (response) => {
.axios(...).then(function(response) {
this.info = response.data;
}.bind(this));
const that = this;
axios(...).then(function(response) {
that.info = response.data;
});
methods: {
processResponse({ data }) {
this.info = data;
},
},
mounted() {
axios(...).then(this.processResponse);
},
async mounted() {
try {
this.info = (await axios(...)).data;
} catch (e) {}
},
data: () => ({
items: Array(10).fill(null),
...
<ul>
<li v-for="(n, i) in items" :style="index < i || { color: n }">
{{ i }}
</li>
</ul>
methods: {
next(color) {
const { index, items } = this;
this.index = index === items.length - 1 ? 0 : index + 1;
items.splice(this.index, 1, color);
},
...
data: () => ({
colors: [ 'red', 'lime', 'blue', 'orange', 'magenta', 'aqua', 'yellow' ],
...
<button v-for="c in colors" @click="next(c)">{{ c }}</button>
<span id="wrong">
в шаблоне компонента - а если экземпляров компонента будет несколько?), путаетесь с операторами - использовали побитовое ИЛИ там, где должно было быть логическое. Может, стоит подождать с vue и подтянуть основы?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);
},
},
});
пишет что такой компонент не зарегистрирован