computed: {
sortedInfo() {
return [...this.info].sort((a, b) => {
// как именно сортировать - тут уж вам виднее
});
},
},
filters: {
shorten: (val, words = 2) => val.split(' ').slice(0, words).join(' '),
},
<div>{{ text | shorten }}</div>
<div>{{ text | shorten(5) }}</div>
watch: {
'$route.query.page'() {
this.loadCustomers();
},
},
watch: {
'$route.query.page': {
immediate: true,
handler: 'loadCustomers',
},
},
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].minify.removeAttributeQuotes = false;
return args;
})
}
};
<div>{{ address }}</div>
<div ref="map"></div>
data: () => ({
coords: [ ... ],
address: '',
}),
mounted() {
ymaps.ready(() => {
const map = new ymaps.Map(this.$refs.map, { ... });
const marker = new ymaps.Placemark(this.coords, {}, {
draggable: true,
});
marker.events.add('dragend', e => {
this.coords = e.get('target').geometry.getCoordinates();
});
map.geoObjects.add(marker);
this.$watch('coords', {
immediate: true,
handler(coords) {
ymaps.geocode(coords).then(r => {
this.address = r.geoObjects.get(0).properties.get('name');
});
},
});
});
},
Проблема в реактивности, при изменении текстов в инпуте, меняются старые записанные обьекты
state.filter_list.push({ ...state.filter })
const marker = new google.maps.Marker({
map: this.map,
title: place.name,
position: place.geometry.location,
});
google.maps.event.addListener(marker, 'click', () => {
this.infowindow.setContent(marker.title);
this.infowindow.open(this.map, marker);
});
this.markers.push(marker);
updateMap() {
if (this.polyline) {
this.polyline.setMap(null);
}
this.polyline = new google.maps.Polyline({
path: this.markers.map(n => n.getPosition()),
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: this.map,
});
},
document.getElementById('map') <...> document.getElementById('inputPlace')
Vue.component('v-tooltip', {
template: `
<div class="wrp">
<div class="btn" @click="visible = !visible">{{ label }}</div>
<div class="tooltip" :class="{ visible }">{{ message }}</div>
</div>`,
props: {
label: {
type: String,
default: 'click me',
},
message: {
type: String,
default: 'hello, world!!',
},
},
data: () => ({
visible: false,
}),
});
@input="onInput($event, product)"
methods: {
onInput(e, product) {
product.quantity = Math.max(0, parseInt(e.target.value) || 0);
},
},
watch: {
products: {
deep: true,
handler() {
this.products.forEach(n => n.quantity = Math.max(0, parseInt(n.quantity) || 0));
},
},
},