如何修改/更改Astro中frontmatter中加载的数据？

Question

我正在使用 Astro 构建一个基本应用程序，在其中使用 frontmatter 中的导入语法从文件加载 JSON 数组。现在，我想在每次点击时将数据分成两半，具体取决于您点击了一半的哪一侧。我在

codepen做了一个演示，请检查。

我只需要了解如何从 API 或本地文件加载 frontMatter 中的数据并修改它。我使用脚本标签编写方法来执行操作，但我似乎无法访问脚本中的数据，也无法将脚本标签中的数据访问到我的标记中。

---
import Layout from '../layouts/Layout.astro';
import Card from "../components/Card.astro";
import messages from '../content/messages_arr.json'; /* <-- frontmatter */
---

<script>
  export let data_A =  "Data A"
  let data_B =  "Data B"
  
  export let methodA = () =>{ console.log(A)}
  let methodB = () =>{ console.log(B)}
  
</script>

<Layout> /* <-- markup */
<div>
  {message}
  {data_A}
  {data_B}
  <button onclick={methodA}>METHOD A</button>
  <button onclick={methodB}>METHOD B</button>
</div>
</Layout>

Answer 1

Astro 组件（包括其 frontmatter 代码）仅在服务器上运行，因此您无法更新 GUI 以响应

onClick

 事件或类似事件。您需要客户端 JavaScript 代码，可以使用：

• 脚本标签和普通 JavaScript，或
成熟的
• 框架，如 React、Vue、Solid、Svelte 等。