Vue 插件适用于 nuxt 服务器负载但不适用于客户端导航（vue-scrollactive）

Posted 2023-02-23

【中文标题】Vue 插件适用于 nuxt 服务器负载但不适用于客户端导航（vue-scrollactive）

【英文标题】：Vue plugin working on nuxt server load but not on client navigation (vue-scrollactive)

【发布时间】：2021-08-04 11:13:34

【问题描述】：

我有一个 Nuxt 应用程序，我在其中安装了 vue-scrollactive 作为插件。

我在子页面（即 website.com/company）上使用它。如果我重新加载 website.com/company 插件工作正常 - 但是，如果我使用 nuxt-link 从另一个页面（即 website.com 或 website.com/about）加载站点，则滚动活动插件不起作用.

更新： 这似乎与出现在v-else 上的fetchState 和main 标签有关。我使用fetch 对虚拟数据进行了测试，并且成功了。

plugins/scrollActive.js

import Vue from 'vue'
import scrollactive from 'vue-scrollactive'
Vue.use(scrollactive)

nuxt.config.js

plugins: [ src: '~/plugins/scrollActive' ],

pages/company.vue

<div class="flex flex-col h-screen bg-gray-100">
    <TheAppNavbar :company="company" />

    <!-- Subnav  -->
    <scrollactive
        :offset="30"
        :highlight-first-item="true"
        scroll-container-selector="#data-area"
        class="block h-16 overflow-x-auto border-b dark:border-gray-600 md:hidden bg-gray-50 dark:bg-gray-800 scrollbars-hidden my-nav"
    >
        <div class="inline-flex items-center h-full text-lg">
            <a
                v-for="category in categories"
                :key="category"
                :href="`#$category`"
                class="flex items-center h-full text-gray-500 capitalize scrollactive-item dark:text-gray-400'"
            >
                <span v-if="publicCat(category)" class="mx-4 sm:mx-8">
                    category
                </span>
            </a>
        </div>
    </scrollactive>

    <!-- Bottom section -->
    <div class="flex flex-1 min-h-0">
        <!-- Narrow sidebar-->
        <scrollactive
            :offset="30"
            :highlight-first-item="true"
            scroll-container-selector="#data-area"
            aria-label="Sidebar"
            class="hidden bg-gray-800 dark:bg-white w-28 md:flex md:flex-col md:overflow-y-auto scrollbars-hidden my-nav"
        >
            <div class="relative flex flex-col px-2 mt-4 space-y-2">
                <a
                    v-if="publicCat('sports')"
                    href="#sports"
                    class="flex scrollactive-item"
                >
                    <span class="mt-2">Sports</span>
                </a>
                <a
                    v-if="publicCat('finance')"
                    href="#finance"
                    class="flex scrollactive-item"
                >
                    <span class="mt-2">Finance</span>
                </a>
            </div>
        </scrollactive>

        <!-- Main area -->
        <div v-if="$fetchState.pending">
             Loading
        </div>
        <div v-else-if="$fetchState.error">
            An error occurred :(
        </div>
        <main 
            v-else
            id="data-area"
        >
            <section
                v-for="cat in categories"
                :id="cat"
                :key="cat"
                aria-labelledby="primary-heading"
                class="flex flex-col flex-1"
            >
                <div v-if="company[cat].public === true">
                    <div id="section-header">
                        <h2>
                             cat 
                        </h2>
                        <p v-if="formattedDate(cat) !== null">
                            Updated:
                             formattedDate(cat) 
                        </p>
                    </div>

                    <CompanySports
                        v-if="cat === 'sports'"
                        class="pb-20 sm:pt-8"
                        :financials="company.sports"
                    />

                    <CompanyFinance
                        v-if="cat === 'finance'"
                        class="pb-20 sm:pt-8"
                        :financials="company.finance"
                    />

                </div>
            </section>

            <a
                :href="`https://$company.website`"
                target="_blank"
                >Visit Website
               </a>
        </main>
    </div>
</div>

<script>

...

methods: 
    publicCat(cat) 
        if (this.company[cat]) 
            if (this.company[cat].public === true) 
                return true
             else 
                return false
            
        
    ,
    formattedDate(cat) 
        if (this.company[cat].updated) 
            const date = new Date(this.company[cat].updated.seconds * 1000)
            return date.toLocaleDateString('en-US', 
                year: 'numeric',
                month: 'short',
                day: 'numeric',
            )
        

        return null
    ,
,
</script>

【问题讨论】：

你有 minimal reproducible example 或 github repo，因为它乍一看还不错。

【参考方案1】：

这有点老套，但我更改了没有v-else 的主要区域并添加了 v-if="$fetchState.pending === false" 和 :class="company === ? 'hidden' : 'block'" 到 div，用数据包围该区域。目前有效，但并不理想。

<!-- Main area -->
    <div v-if="$fetchState.pending">
         Loading
    </div>
    <div v-else-if="$fetchState.error">
        An error occurred :(
    </div>
    <main 
        id="data-area"
    >
        <section
            v-for="cat in categories"
            :id="cat"
            :key="cat"
            aria-labelledby="primary-heading"
            class="flex flex-col flex-1"
        >
            <div 
                v-if="$fetchState.pending === false && company[cat].public === true"
                :class="company ===  ? 'hidden' : 'block'"
            >
                <div id="section-header">
                    <h2>
                         cat 
                    </h2>
                    <p v-if="formattedDate(cat) !== null">
                        Updated:
                         formattedDate(cat) 
                    </p>
                </div>

                <CompanySports
                    v-if="cat === 'sports'"
                    class="pb-20 sm:pt-8"
                    :financials="company.sports"
                />

                <CompanyFinance
                    v-if="cat === 'finance'"
                    class="pb-20 sm:pt-8"
                    :financials="company.finance"
                />

            </div>
        </section>

        <a
            v-if="$fetchState.pending === false"
            :class="company ===  ? 'hidden' : 'block'"
            :href="`https://$company.website`"
            target="_blank"
            >Visit Website
           </a>
    </main>