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

louiesun 2024-06-28 11:30:17

我没有系统学过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>

```

...全文
83 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

87,955

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧