如何从 vuetify 轮播中的循环访问数据？

Question

我使用 vuetify 制作了一种旋转木马来显示存储在数据库中的食谱。但是我想当我点击一个食谱时，轮播会在 space 下方打开，其中包含相关食谱的所有元素（我们点击的那个）所以我在 vuetify 上找到了一个与我完全对应的组件'我正在寻找：Here is Vuetify Carousel

但是在我的 v-slide-item 中，我使用了一个循环来检索食谱数据，但是突然从 v-expand-transition 我无法再访问这个循环，我怎么突然显示食谱数据？

这是代码：

<template>
    <v-sheet
        class="mx-auto"
        elevation="8"
        max-width="100%"
        style="box-shadow: none !important;"
    >
        <v-slide-group
            v-model="model"
            class="pa-4 slider"
            show-arrows
        >
            <v-slide-item
                v-for="n in Object.keys(recipes)"
                :key="recipes[n].id"
                v-slot="{ active, toggle }"
            >
                <v-card
                    :color=" 'grey lighten-1'"
                    class="ma-4 card-recipe"
                    height="200"
                    width="200"
                    style="border-radius: 10px;"
                    v-bind:style="recipes[n].recipe[0].first_recipes_image != null ? {  backgroundImage: 'url(' + recipes[n].recipe[0].first_recipes_image + ')' } : {  backgroundImage: 'url(https://cdn.vuetifyjs.com/images/cards/sunshine.jpg)' }"
                    @click="toggle"
                >
                    <p class="card-text" ><span class="black--text">{{ recipes[n].recipe[0].name }}</span></p>
                    <v-row
                        class="fill-height"
                        align="center"
                        justify="center"
                    >
                        <v-scale-transition>
                            <v-icon
                                v-if="active"
                                color="white"
                                size="48"
                                v-text="'mdi-close-circle-outline'"
                            ></v-icon>
                        </v-scale-transition>
                    </v-row>
                </v-card>
            </v-slide-item>
        </v-slide-group>

        <v-expand-transition>
            <v-sheet
                v-if="model != null"
                height="200"
                tile
                style="background-color: #FFF8F0 !important;"
            >
                <v-row
                    class="fill-height"
                    align="center"
                    justify="center"
                >
                    <h3 class="text-h6">
                        Selected {{ model }}
                    </h3>
                </v-row>
            </v-sheet>
        </v-expand-transition>
    </v-sheet>
</template>

<script>
    import { mapGetters } from "vuex";

    export default {
        props: {
        },
        data: () => ({
            model: null,
            recipes: [],
            openedCards: [],
        }),
        computed: {
            console: () => console,
            ...mapGetters({
                plantActive: 'permatheque/getPlant',
            }),
        },
        methods: {
           async getPlantRecipes() {
          this.$axios
            .$get("/lnk/plant/recipes?plant_id=" + this.plantActive.id + "")
            .then((response) => {
              this.recipes = response;
              console.log(this.recipes);
            })
            .catch((error) => {
              console.log(error);
            });
    },
        },
        mounted() {
            this.getPlantRecipes()
        }
    }
</script>

希望我说得够清楚了，谢谢！

Answer 1

您可以使用 v-slide-group 的 v-model，它基本上是轮播中所选项目的食谱数组的索引。

这样您就知道选择了哪个食谱，因此您可以从数组中获取食谱信息或进行另一个 api 调用以获取该信息。

例子

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71474788-recipes-carousel-6vm97o?file=/src/components/Example.vue

如果你的食谱数组中已经有了食谱信息，你需要做的就是使用我重命名为 recipeIndex 的 v-slide-group 的 v-model 变量来访问它数据直接来自您的阵列。

<v-expand-transition>
    <v-sheet v-if="recipeIndex != null" tile style="background-color: #FFF3E0 !important;">
        <v-container fluid class="pa-12">
            <v-row>
                <v-col cols="12" sm="6">
                    <span class="text-h6">{{ `${recipes[recipeIndex].name}'s Recipe` }}</span> <br>
                    <span class="text-subtitle-1">{{ recipes[recipeIndex].description }}</span>
                    <p class="text-justify mt-4">
                        {{ recipes[recipeIndex].steps }}
                    </p>
                </v-col>
                <v-col cols="12" sm="6" class="d-flex align-center justify-center">
                    <div class="thumbnail">
                        <img :src="recipes[recipeIndex].image" alt="Beach Scene" style="width: 100%;" />
                    </div>
                </v-col>
            </v-row>
        </v-container>
    </v-sheet>
</v-expand-transition>

如果您需要从辅助 api 电话中获取信息。您可以在 recipeIndex 变量上设置一个观察器，以便在每次更改时获取食谱信息。

如何从 vuetify 轮播中的循环访问数据？

How to access data from a loop in a vuetify carousel?

javascript

vue.js

nuxt.js

vuetify.js

例子