我的超链接标签 ID 在 Svelte 的浏览器中一直显示为文本

Posted 2023-02-19

【中文标题】我的超链接标签 ID 在 Svelte 的浏览器中一直显示为文本

【英文标题】：My id of an hyperlink tag keeps displaying as text on the browser in Svelte

【发布时间】：2022-01-13 19:09:56

【问题描述】：

我一直在尝试使用我对 Restful API 和 svelte 的知识制作一个网络应用程序 wiki，但我遇到了一个问题，我为超链接标签提供了 db 中每个对象的 id 的 id，它可以工作但问题是它继续在浏览器中将超链接 tag() 的 id 显示为文本。我该如何解决这个问题？

这是结果的直观表示：

代码如下：

<script>
import  onMount  from 'svelte';
import  each  from 'svelte/internal';
import  store  from '$lib/store';

let articles = [];
onMount(async () => 
    const response = await fetch('http://localhost:5000/articles');
    const data = await response.json();
    articles = data;
)

</script>

<div class="container">
    #each articles as article
        <a href="/articles/article/article._id" id=article._id>
             article.title
            <hr>
        </a>
        $store = article._id
    /each
</div>

<style>
    a 
        text-decoration: none;
        color: rgb(223, 209, 209);
        font-weight: bold;
        font-size: 1.5rem;
    

    a::hover 
        text-decoration: underline;
    

    div 
        margin-top: 90px;
        text-align: center;
    
</style>

我真的需要帮助T_T

【问题讨论】：

我猜你需要在 id 中为 "id=article._id" 的文本加上引号，就像 href 一样。

对 Svelte 的 stynax 不太熟悉，但看起来您只是在此处输出结果值 $store = article._id。

属性通常不需要引号。房产的价值是多少？

会不会是变量 $store 没有声明，而是显示 article.id 而不是赋值？请注意，ID 出现在链接之后，如最后一个 ID 在其自己的行上而第一行没有 ID 所示。

【参考方案1】：

要不显示ID，需要去掉这行：

$store = article._id

这是分配给商店并返回值，这会呈现 ID 文本。这在 Svelte 代码中是不常见的。通常，您更新脚本块中的数据并将其呈现在您的模板中——您的模板不应该对您的数据产生副作用。