首页 新闻 会员 周边 捐助

求助关于vue,key设置但不刷新

0
[待解决问题]

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

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

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


<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>

vue
louiesun的主页 louiesun | 菜鸟二级 | 园豆:206
提问于:2024-06-28 12:08
< >
分享
所有回答(1)
0

当你需要响应式变化,也就是想通过数据改变DOM的时候,记得使用ref等函数将数据结构变成响应式的。
let MD5pathname: string = ref(Md5.hashStr(pathname));
修改时使用 MD5pathname.value = "new value"。
在DOM中获取时{{ MD5pathname }},这处你不用修改。

建议你还是看下vue的基础用法吧。

星小梦 | 园豆:328 (菜鸟二级) | 2024-06-28 14:18

非常感谢。
还是要抽空系统学一下……

支持(0) 反对(0) louiesun | 园豆:206 (菜鸟二级) | 2024-06-28 14:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册