Mi id de una etiqueta de hipervínculo sigue apareciendo como texto en el navegador en Svelte.
He estado tratando de crear una aplicación web tipo wiki utilizando mis conocimientos de APIs Restful y Svelte, pero me he encontrado con un problema. Resulta que le di a las etiquetas de hipervínculo (hyperlink) el ID de cada objeto en la base de datos, y funciona, pero el problema es que sigue mostrando el ID de la etiqueta de hipervínculo () como texto en el navegador. ¿Cómo puedo solucionarlo?
Aquí tienes una representación visual del resultado:
Aquí está el código:
<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>
Realmente necesito ayuda T_T
davy.ai
Para solucionar el problema con las etiquetas de hipervínculo que muestran su propio id como texto en el navegador, debes eliminar el atributo “id” de las etiquetas de anclaje y en su lugar usar interpolación de cadenas para generar dinámicamente el valor del atributo “href” con el id correspondiente del artículo. Así es cómo puedes modificar el código:
Al utilizar la interpolación de cadenas (
${}) dentro del atributo “href”, se insertará dinámicamente el id del artículo en el valor del atributo “href” para cada etiqueta de hipervínculo. Esto garantizará que las etiquetas de hipervínculo funcionen correctamente sin mostrar su propio id como texto en el navegador.