求助关于vue,key设置失败。

louiesun louiesun 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区

我没有系统学过vue。这是我的vitepress博客中的一部分。

我尝试使用`key`使得元素能在页面更改时刷新,但是,实际运作时,这段代码的alert内容会更新,然而DOM终得<p>元素内容不会更新,这是为什么。

实际上,我需要使用key来使giscus运作。

```vue

<script setup lang="ts">

import { Md5 } from 'ts-md5';

import { onContentUpdated, useRouter } from "vitepress";

import Giscus from '@giscus/vue';

 

let pathname: string = location.pathname;

let MD5pathname: string = Md5.hashStr(pathname);

onContentUpdated(() => {

  pathname = location.pathname;

  MD5pathname = Md5.hashStr(pathname);

  alert(MD5pathname)

});

 

</script>

<template>

  <!--

  <Giscus id="comments"

    repo="louiesun/louiesun.github.io"

    repo-id="R_kgDOMOvc_A"

    category="General"

    category-id="DIC_kwDOMOvc_M4CgbNY"

    mapping="pathname"

    strict="1"

    reactions-enabled="1"

    emit-metadata="0"

    input-position="top"

    theme="preferred_color_scheme"

    lang="zh-CN"

    crossorigin="anonymous"

    async />

  -->

  <p :key="MD5pathname">{{ MD5pathname }}</p>

</template>

<style scoped></style>

```

...全文
评论
收藏 已收藏
分享
返回顶部
louiesun
JavaScript 87,983 成员 224,681 内容