0
308
Vistas¿Problema con la ruta dinámica del enlace del enrutador usando v-for loop en Vuejs?
//main.js import Vue from "vue"; import App from "./App.vue"; import VueRouter from "vue-router"; import HelloWorld from "./components/HelloWorld.vue"; Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: "/", component: HelloWorld }] }); Vue.config.productionTip = false; new Vue({ router, render: (h) => h(App) }).$mount("#app"); //User.vue <template> <div> <form> <label>First name:</label><br /> <input type="text" id="fname" name="fname" /><br /> <label>Last name:</label><br /> <input type="text" id="lname" name="lname" /><br /><br /> <input type="submit" value="Submit" /> </form> </div> </template> <script> export default { name: "User", }; </script> //HelloWorld.vue <template> <div> <b>Vuejs dynamic routing</b> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> <router-link :to="{ name: 'User', params: { id: item.id } }"> {{ item.kk }} </router-link> </div> <br /><br /><br /> <User /> </div> </template> <script> import User from "./User.vue"; export default { name: "HelloWorld", components: { User, }, data() { return { items: [ { id: 1, val: "1", kk: "mm" }, { id: 2, val: "22", kk: "aa" }, { id: 3, val: "55", kk: "dd" }, { id: 4, val: "77", kk: "gg" }, ], }; }, }; </script>¿Problema con la ruta dinámica del enlace del enrutador usando v-for loop en Vuejs?
Recibo el siguiente error: - [Advertencia de Vue]: falta la propiedad requerida: "a" [advertencia de Vue]: error en el renderizado: "TypeError: no se pueden leer las propiedades de undefined (leyendo '_normalizado')" TypeError: no se pueden leer las propiedades de indefinido (leyendo '_normalizado')
Código actualizado aquí: - https://codesandbox.io/s/suspicious-germain-vepmk?file=/src/App.vue
2 Respuestas
Responde la pregunta0
En su ciclo, accede a item.param que no existe. Supongo que quieres acceder a item.id
<router-link :to="{ name: 'User', params: { id: item.id } }"> {{ item.kk }} </router-link>Una pequeña observación adicional: también debe configurar la identificación como clave en su ciclo
<div v-for="item in items" :key="item.id">EDITAR
En su caja de códigos, parece que tiene algunos errores (no se compila debido a la falta de importación del componente Usuario en la principal)
Sin embargo, también deberá usar la preview del nombre de la ruta tal como la definió así en su main.js
<router-link :to="{ name: 'preview', params: { id: item.id } }"> {{ item.kk }} </router-link>Y aún más importante: no parece definir una vista de enrutador. Sin una vista de enrutador, su componente de ruta no se mostrará.
Parece que hay muchos pequeños errores aquí que son difíciles de resumir en una respuesta; consulte los documentos ( https://router.vuejs.org/guide/#html ) para ver la vista del enrutador.
0
Hay problemas en tu código.
- Ha definido el nombre de la ruta como 'vista previa' pero usando 'usuario' en su enlace de enrutador
- No está usando la etiqueta <router-view> que se usa para mostrar el componente cambiado, básicamente, debe usarla en su app.vue
Debe agregar la vista del enrutador en su aplicación o componente principal donde desea ver el cambio en el componente después del enrutamiento. También puede agregar algunas capturas de pantalla de los problemas que enfrenta, ya que no está muy claro en su pregunta.
Editar: para eliminar # de la URL, debe usar el modo de historial como 