0

Estoy mostrando todos los personajes con v-for pero lo que quiero conseguir es que cada personaje pueda tener un enlace, es decir que cuando pinche en cada personaje me lleve hacia la vista donde están los demás datos de ese personaje. Pero claro avenir los datos de la api, no se como introducir el href de cada uno. Ahora mismo todos los personajes me llevan a /walker.

<div v-for="character in characters" :key="character.name">
   <a href="http://localhost:8080/walker">
<h1 class="letra">{{ character.name}}</h1></a><div>

Router.js

const routes = [{
path: '/',
name: 'Home',
component: Home},{
path: '/walker',
name: 'Walker',
component: Walker},
5
  • Y que es walker? El nombre de un personaje? Tienes un componente para mostrar el detalle de cada personaje? Commented el 25 abr. 2022 a las 19:19
  • Si me lleva a una vista en la que esta los datos de ese personaje específico. Pero quiero ponerlos todos, tengo ya creado las rutas y los componentes de todos los personajes solo me falta el href que nose donde ponerlo. Commented el 25 abr. 2022 a las 19:26
  • Y qué espera como parámetro esa ruta? podrías mostrarla? Commented el 25 abr. 2022 a las 19:35
  • Y la estoy mostrando no estoy pasando parámetros ninguno. Commented el 25 abr. 2022 a las 19:46
  • 1
    Bueno, pero esa ruta tiene hardcodeado el nombre del personaje... Y el componente también es sólo para ese personaje. Con ese enfoque vas a tener que hacer un componente y una ruta para cada personaje. Lo que podrías hacer es un componente reutilizable para mostrar los detalles de cualquier personaje, y pasarle un identificador en un segmento dinámico de la ruta router.vuejs.org/guide/essentials/dynamic-matching.html Commented el 25 abr. 2022 a las 19:51

1 respuesta 1

1

Primero, el :key es buena practica que le asignes un id. Segundo utiliza router-link para navergar a cambio del <a></a>. En Prueba con esto: Vue.JS

<div v-for="character in characters" :key="character.id">
 <router-link :to="{name: 'Walker',params:{name:character.name}}">
   {{character.name}}
 </router-link>
<div>

Router:

const routes = [{
path: '/',
name: 'Home',
component: Home},{
path: '/walker/:name',
name: 'Walker',
component: Walker},

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.