Блог

У меня есть несколько карточек на странице, у каждой есть диалоговое окно, которое открывается, чтобы показать карусель изображений, относящихся к этой карте.

Изображения показывают, когда я открываю диалоговое окно в первый раз, но затем оно не используется для последующих. Если я вернусь к первоначальному, где показывались изображения, теперь их нет.

В консоли нет ошибок или предупреждений.

     <v-dialog v-model="dialog" width="80vw">
      <template v-slot:activator="{ on }">
        <v-btn class="btn-info" v-on="on">More Info amp;rarr;</v-btn>
      </template>

      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>{{project.name}}</v-card-title>

        <v-carousel >
          <v-carousel-item v-for="(image, index) in project.images" :key="image.id" :src="image.src"></v-carousel-item>
        </v-carousel>
        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialog=false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

  

Я ничего не вижу в документации о том, как обрабатывать несколько каруселей на странице. Должны ли у них быть определенные ключи?

Является ли project.images каталогом, который вы пытаетесь использовать? Довольно сложно разобраться в проблеме без раздела script и того, как выглядит раздел data или props.