只有最后一个 v-for 元素会被更新，而所有元素都应该被更新

Question

导航中的 3 个页面链接应由用户选择以 3 种语言显示。在初始页面加载中它工作正常。然后单击一种语言更改链接，然后再次正常工作。但是，当我再次单击语言更改链接时，只有最后一个链接的语言会发生变化，而所有链接都应该更改语言。是什么导致了这个问题以及如何解决它？

app.vue：

<template>
    <nav class="navbar">
        <NuxtLink class="pagelink" :key="page.slug" v-for="page in strings.pages" :href="'/' + page.slug">{{ page.name[lang] }}</NuxtLink>
        <Languages />
    </nav>
</template>
<script>
import Languages from "./components/languages.vue"
import languages from "../services/languages"
export default {
    name: "Navbar",
    data() {
        return {
            open: false,
            strings: {
                pages: [
                    {
                        slug: 'home',
                        name: { az: "Əsas", ru: "Главная", en: "Home" }
                    },
                    {
                        slug: 'about',
                        name: { az: "Haqqımızda", ru: "О нас", en: "About" }
                    },
                    {
                        slug: 'contact',
                        name: { az: "Əlaqə", ru: "Связаться", en: "Contact Us" }
                    }
                ]
            }
        }
    },
    computed: {
        lang() {
            return languages(this)
        }
    }
}
</script>

<style>
* {
    margin: 10px;
}
</style>

语言.vue：

<template>
    <div class="languages">
        <NuxtLink :to="route.path + '?hl=az'">AZ</NuxtLink>
        <NuxtLink :to="route.path + '?hl=ru'">RU</NuxtLink>
        <NuxtLink :to="route.path + '?hl=en'">EN</NuxtLink>
    </div>
</template>

<script>
export default {
    name: "Languages",
    setup() {
        const route = useRoute()
        return {
            route
        }
    }
}
</script>

<style scoped>
div,
div a {
    height: 40px;
    display: inline-block;
}

img {
    height: 60%;
    display: inline-flex;
    margin: 8px;
}
</style>

语言.js：

function languages(page) {
    let langCookie = useCookie("language")
    let language = langCookie.value
    if (page.$route.query.hl) {
        language = page.$route.query.hl
        langCookie.value = language
    }
    return language || 'az';
}

export default languages

Answer 1

我在您的代码中看到的主要问题是您正在更改

languages

函数中的 cookie，由您的

lang

计算调用。

计算不应该产生副作用，请参阅Vue文档以供参考。

您应该拆分逻辑，只返回当前语言或计算中的后备值。

setup() {
    let langCookie = useCookie('language');

    return {
      langCookie
    }
},

computed: {
    lang() {
        return this.langCookie || 'az';
    }
}

仅在必要时才应提取并调用在 cookie 中保留新语言的代码。例如，您可以在用户单击语言选择器中的语言链接时调用它，或者使用以下命令在 URL 中存在的语言值上添加立即观察器。

<template>
  <div class="languages">
    <!-- You don’t need to pass the current URL again here, you can alter the query only, as an object, vue-router will take care of computing the URL -->
    <NuxtLink :to="{ query: { hl: 'az' } }">AZ</NuxtLink>
    <NuxtLink :to="{ query: { hl: 'ru' } }">RU</NuxtLink>
    <NuxtLink :to="{ query: { hl: 'en' } }">EN</NuxtLink>
  </div>
</template>

<script>
import { watch } from 'vue';
import { useRoute } from 'vue-router';
import { useCookie } from '?';

export default {
  name: 'Languages',

  setup() {
    const route = useRoute();
    const langCookie = useCookie('language');

    watch(
      // Whenever the route query language change
      () => route.query.hl,
      // Save the new value in the cookie
      (newLang) => {
        langCookie.value = newLang;
      },
      {
        // Do this logic immediately, in case the page is loaded
        // with `hl` already set and different from the current cookie value
        immediate: true
      }
    );
  }
}
</script>