在 vue 3 中访问设置变量

Question

我正在使用 vue 3 和 vuetify 3 在 nuxt 3 中创建一个应用程序。

我试图自学 vue 3 的新功能，因为我有大量的 vue 2 背景。

我的页面代码如下。该代码有效，但我无法在任何地方访问变量“内容”。您可以在我的模板中看到它呈现出 v-card，但是如果我使用普通标签我无法访问内容？我得到的内容是未定义的。我知道它们在不同的脚本块中，我想我是在问我做错了吗还是我可以轻松访问它？

<script setup>
import { contentStore } from '@/stores/contentStore'
const setContentItem = contentStore();
const { pendingContent, content } = redisAggregateSearch('idx:content:details', '@deleted:0 @contentStatus:{Live} @contentArea:{Oomph TV}', '0', '20', '@id,@contentTitle,@contentAlias,@contentDescription,@thumbnailImageURL', '@contentTitle', false);

definePageMeta({
    name: 'Home',
    middleware: 'auth'
})

function openContent(item) {
    setContentItem.value = item
    navigateTo('/content/' + item.id)
}
</script>

<script>
export default {
    data: () => ({
        pageNo: 1,
        pageSize: 20,
    }),
    computed: {
        // numberOfPages() {
        //     debugger
        //     return Math.ceil(content.data.results / this.pageSize);
        // },
        // pagedContent() {
        //     let t = this;
        //     const startIndex = (t.pageNo - 1) * t.pageSize;
        //     const data = [...content];
        //     return data.splice(startIndex, t.pageSize);
        // }
    },
};
</script>

<template>
    <v-main>
        <v-container fluid>
            <app-bar />
            <v-row no-gutters>
                <div v-if="pendingContent" class="d-flex justify-center">
                    <v-progress-circular color="primary" :size="91" :width="10" indeterminate></v-progress-circular>
                </div>
                <div class="d-flex flex-wrap justify-center" v-else>
                    <v-col cols="12" class="pb-4">
                        <v-pagination v-model="pageNo" :length="numberOfPages" prev-icon="icons8-back-to"
                            next-icon="icons8-next-page" circle></v-pagination>
                    </v-col>
                    <v-card v-for="(item, index) in content.data.results" :key="index" @click="openContent(item)"
                        class="bg-primary elevation-0 pa-0 ma-2 mb-4 flex-wrap" width="280" height="200">
                        <v-card-title class="pa-0">
                            <v-img v-if="item.thumbnailImageURL" class="rounded" max-height="130"
                                :src="item.thumbnailImageURL" cover></v-img>
                            <v-img v-else class="rounded" max-height="130"></v-img>
                        </v-card-title>
                        <v-card-text class="pa-2">
                            <div class="text-body-2 font-weight-bold text-accent text-uppercase">
                                {{ item.contentAlias }}
                            </div>
                            <div class="text-body-2 font-weight-bold">
                                {{ item.contentTitle }}
                            </div>
                        </v-card-text>
                    </v-card>
                </div>
            </v-row>
        </v-container>
    </v-main>
</template>

这是 redisAggregateSearch，我删除了 api url。

export default (index, query, from, to, fields, sortBy, sortDesc) => {

    const { pending: pendingContent, data: content } = useLazyFetch(
        `${baseURL}/aggregatesearch/?index=${index}&searchquery=${query}&from=${from}&size=${to}&fields=${fields}&sortby=${sortBy}&sortdesc=${sortDesc}`
    );

    return {
        pendingContent,
        content,
    };
}

Answer 1

我对此的回答是将 v-card 内容部分拆分成它自己的组件，并将数据作为道具向下传递，在组件安装后，我能够按照 vue.js 示例连接到计算和操作数据：

Vue 网格示例