<gmap-map
ref="map"
v-bind="options"
@click="onMapClick"
>
<gmap-marker
v-for="m in markers"
:key="m.id"
:position="m.position"
:clickable="true"
:draggable="true"
@click="onMarkerClick"
/>
</gmap-map>
data: () => ({
options: {
center: { lat: 45.101637, lng: 38.986345 },
zoom: 15,
},
markers: [],
}),
methods: {
onMapClick(e) {
this.markers.push({
id: 1 + Math.max(0, ...this.markers.map(n => n.id)),
position: e.latLng,
});
},
onMarkerClick(e) {
this.$refs.map.panTo(e.latLng);
// или
// this.options.center = e.latLng;
},
},
v-model
свойства checked элементов products. Отключить чекбокс - свойства disabled у вас уже есть, просто привяжите их значения к чекбоксам.<input
type="checkbox"
v-model="product.checked"
:disabled="product.disabled"
>
computed: {
totalPrice() {
return this.products.reduce((acc, n) => acc + n.checked * n.price, 0);
},
},
state: {
page: 0,
perPage: 5,
total: 0,
posts: [],
loading: false,
},
getters: {
numPages: state => Math.ceil(state.total / state.perPage),
},
mutations: {
updateLoading: (state, loading) => state.loading = loading,
updatePosts: (state, { posts, total, page }) => Object.assign(state, { posts, total, page }),
},
actions: {
async fetchPosts({ state, commit }, page) {
commit('updateLoading', true);
const start = (page - 1) * state.perPage;
const end = page * state.perPage;
const url = `https://jsonplaceholder.typicode.com/posts?_start=${start}&_end=${end}`;
try {
const response = await fetch(url);
const posts = await response.json();
const total = response.headers.get('x-total-count');
commit('updatePosts', { posts, total, page });
} catch (e) {
console.error(e);
}
commit('updateLoading', false);
},
},
props: [ 'page', 'numPages' ],
methods: {
goTo(page) {
this.$emit('paginate', page);
},
next(step) {
this.goTo(this.page + step);
},
},
computed: {
isFirst() {
return this.page <= 1;
},
isLast() {
return this.page >= this.numPages;
},
},
<button @click="goTo(1)" :disabled="isFirst"><<</button>
<button @click="next(-1)" :disabled="isFirst"><</button>
{{ page }} / {{ numPages }}
<button @click="next(+1)" :disabled="isLast">></button>
<button @click="goTo(numPages)" :disabled="isLast">>></button>
v-model
:model: {
prop: 'page',
event: 'paginate',
},
computed: {
page: {
get() {
return this.$store.state.page;
},
set(page) {
this.$store.dispatch('fetchPosts', page);
},
},
<компонент-пагинации
v-model="page"
:num-pages="$store.getters.numPages"
/>
created() {
this.page = 1;
},
<div v-if="$store.state.loading">данные загружаются, ждите</div>
<компонент-для-отображения-данных v-else :данные="$store.state.posts" />
выводит побуквенно
v-for
так и перебирает - "побуквенно". То есть, значениями user являются строки единичной длины. Ну а свойств id, name, price и т.д. у строк нет, отсюда пустота там, где вы выводите свойства элементов users. mounted() {
this.cropper = new Cropper(this.$refs.image, {
zoomable: false,
scalable: false,
aspectRatio: 1,
});
},
methods: {
selectFile(e) {
const file = (e.target.files || e.dataTransfer.files)[0];
if (file) {
const reader = new FileReader();
reader.onload = e => this.cropper.replace(e.target.result);
reader.readAsDataURL(file);
}
},
},
methods: {
onPopupOpen(e) {
e.target
.getPopup()
.getElement()
.querySelector('.leaflet-popup-content-wrapper')
.addEventListener('dblclick', this.onPopupDblClick);
},
onPopupDblClick(e) {
const
id = +e.currentTarget.querySelector('[data-id]').dataset.id,
// теперь, зная id, можно найти соответствующий объект
...
.once('popupopen', this.onPopupOpen)
return createElement('div', {
domProps: {
innerHTML: '<b>hello, world!!</b>',
},
});
не давать снять последний чекбокс
В документации написано, что данные передаваемые через provide/inject от родителя ребенку реактивны.
Note: theprovide
andinject
bindings are NOT reactive.
created() {
this.chooseChild = Object.values(this.parent)[0];
this.chooseS = Object.values(this.chooseChild)[0];
this.showinfo = Object.values(this.chooseS)[0];
},
data: () => ({
selectedValues: [],
...
computed: {
selectData() {
const options = [];
let { items } = this;
while (items instanceof Object) {
options.push(Object.keys(items));
items = items[this.selectedValues[options.length - 1]];
}
return {
options,
result: items || null,
};
},
},
<div>
<select
v-for="(options, i) in selectData.options"
v-model="selectedValues[i]"
@input="selectedValues.length = i"
>
<option v-for="n in options">{{ n }}</option>
</select>
</div>
<div>SELECTED: <b>{{ selectData.result || '< NONE >' }}</b></div>
created() {
let { items } = this;
while (items instanceof Object) {
const key = Object.keys(items)[0];
this.selectedValues.push(key);
items = items[key];
}
},
{{ массивВозможныхЗначений[индексЗначения] }}
следующееЗначение = массивВозможныхЗначений[массивВозможныхЗначений.indexOf(текущееЗначение) + 1]