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

Question

[Horus123]

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

images

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"],

Answer 1

[0xD34F]

Не могу закрыть поп-ап

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

Comments

[Horus123]

Спасибо!