@Horus123

Как правильно настроить слайдер и поп-ап Vuetify?

Пытаюсь настроить слайдер и поп-ап средствами Vuetify.
1.Не могу закрыть поп-ап;
2.При нажатии на кнопку, при выборе 3 изображения на превью открывается всегда первое.
images
6009499c3d4a4163136272.png
6009492ec07ee169886187.png

template
          v-row
            v-col(v-for="(item,index) in pictures", :key="index")
              v-item
                v-dialog(v-model="dialog[index]" )
                  template(v-slot:activator="{ on, attrs }")
                    v-img(v-on="on", v-bind="attrs", height="100", width="100", :src="item")
                  v-carousel
                    v-carousel-item(v-for="(item,index) in pictures", :key="index")
                      v-img(:src="item")
                  v-btn(@click="dialog[index]= false") {{dialog[index]}}
data:
 dialog: [],
pictures: ["https://picsum.photos/700","https://picsum.photos/400", "https://picsum.photos/500"],
  • Вопрос задан
  • 34 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Не могу закрыть поп-ап

dialog: [],

dialog[index]= false

Кто-то невнимательно читал документацию.

При нажатии на кнопку, при выборе 3 изображения на превью открывается всегда первое.

Не всегда, а при первом открытии каждого диалога.

Кстати, непонятно - а зачем вам три диалоговых окна? Сделайте одно:

data: () => ({
  slide: null,
  dialog: false,
  ...
}),
methods: {
  openDialog(slideIndex) {
    this.slide = slideIndex;
    this.dialog = true;
  },
  ...
},

v-row
  v-col(v-for="(n, i) in pictures")
    v-item
      v-img(height="100", width="100", :src="n", @click="openDialog(i)")
  v-col(hidden="")
    v-dialog(v-model="dialog")
      v-carousel(v-model="slide")
        v-carousel-item(v-for="n in pictures")
          v-img(:src="n")
      v-btn(@click="dialog = false") close dialog
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы