vue.js - template error when i use v-for render NuxtLink - Stack Overflow

admin管理员组

文章数量:1195539

I’m a Nuxt beginner and recently encountered an issue related to page rendering. On the parent page, I fetch data and use v-for in components to generate multiple NuxtLink elements. However, there’s a bug where duplicate elements appear on the page. I’d like to ask how I should handle this issue(This page uses CSR (Client-Side Rendering) for navigation.). Here’s an example of my code:

<template>
  <div ref="list" class="list">
    <template v-for="page in pageDisplay" v-bind:key="page">
      <NuxtLink
        v-bind:external="props.useNativeLink"
        v-bind:to="{
          hash: '#' + props.jumpAnchor,
          query: { ...route.query },
          params: {
            p: page == 1 && props.hideFirstPageLink ? '' : page,
          },
        }"
      >
        {{ page === props.currentPageNo }} // this value is current show
        <button
          v-bind:key="`pagination-${page}`"
          class="pageNo"
          v-bind:data-is-active="page === props.currentPageNo" // control button color,but sometimes elements are displayed multiple times when use v-for
          type="button"
        >
          {{ page }}
        </button>
      </NuxtLink>
    </template>
  </div>
</template>

<script setup lang="ts">
const pageDisplay = computed<number[]>(() => {
  let startPageNo = 0;
  const offset = device.getDevice.value === 'mobile' ? 2 : 5;

  if (props.currentPageNo - offset <= 1) {
    startPageNo = 1;
  } else if (props.currentPageNo + offset >= props.totalPage) {
    const tempStartPageNo = props.totalPage - offset * 2;
    startPageNo = tempStartPageNo <= 0 ? 1 : tempStartPageNo;
  } else {
    startPageNo = props.currentPageNo - offset;
  }

  const maxPageCount = offset * 2 + 1;
  const result = startPageNo + props.totalPage > maxPageCount ? maxPageCount : props.totalPage;

  return generateArray(result).map((item, index) => index + startPageNo);
});
</script>

This piece of code is the data source passed into the component:

const limitStartIndex = computed<number>(() => PAGE_SIZE * (currentPage.value - 1));

const { data: authorArticleData, pending: authorArticleLoading } = await useAsyncData(
  () =>
    NuxtArticleFetcherModule.getArticleList({
      condition: ['author_id'],
      limit: [limitStartIndex.value, 20], // todo: decide how many
      order: {
        col: orderCol.value,
        sort: 'DESC',
      },
      value: [[authorId]],
    }),
  { watch: [orderCol, limitStartIndex] },
);
const totalPage = computed<number>(() =>
  authorArticleData.value ? authorArticleData.value.totalPage : 1,
);

node version: v18.20.4
nuxt version: 3.14.159

The condition page === props.currentPageNo, when displayed using {{}} within a loop, behaves as expected, with only one result being true. However, when used like this:

<button v-bind:data-is-active="page === props.currentPageNo">

It randomly causes an issue where multiple elements incorrectly have the true state simultaneously.

本文标签： vuejstemplate error when i use vfor render NuxtLinkStack Overflow