datalist.js
import axios from "axios"; export const datalist = () => { return axios.get("myapiurl/name...").then((response) => response); };HolaMundo.vue
<template> <div> <div v-for="item in items" :key="item.DttID"> <router-link :to="{ name: 'UserWithID', params: { id: item.DepaD }, query: { DepaD: item.DepaID }, }" > <div class="bt-color">{{ item.DepaName }}</div> </router-link> </div> <br /><br /><br /> <User /> </div> </template> <script> import User from "./User.vue"; import { datalist } from "./datalist"; export default { name: "HelloWorld", components: { User, }, data() { return { items: datalist, }; }, mounted() { datalist().then((r) => { this.items = r.data; }); }, }; </script>Usuario.vue
<template> <div> <div v-for="(item, key) in user" :key="key"> {{ item.Accv }} </div> </div> </template> <script> import { datalist } from "./datalist"; export default { name: "User", data() { return { lists: datalist, }; }, computed: { user: function () { return this.lists.filter((item) => { if (item.DepaD === this.$route.params.id) { return item; } }); }, }, }; </script>El error con el código es,
[Advertencia de Vue]: error en el procesamiento: "TypeError: this.lists.filter no es una función" TypeError: this.lists.filter no es una función
El error anterior que recibo en el componente User.vue en el número de línea '20'
Desde la API que se encuentra en el archivo datalist.js, creo que no estoy obteniendo los datos correctamente. o en el filtro de lista hay un problema en User.vue?
Intenta cambiar lo siguiente
HolaMundo.vue
data() { return { items: [], }; }, mounted() { datalist().then((r) => { this.items = r.data; }); },Usuario.vue
data() { return { lists: [] }; }, mounted() { datalist().then((r) => { this.lists = r.data; }); },Al menos esto suprime el error, pero no puedo decir más según su fragmento ya que hay problemas de red :)
Dado que su función de lista de datos devuelve una Promesa, debe esperar a que se complete. Para hacer esto, simplemente modifique el código de su componente de la siguiente manera:
import { datalist } from "./datalist"; export default { name: "User", data() { return { // empty array on initialization lists: [], }; }, computed: { user: function() { return this.lists.filter((item) => { if (item.DeploymentID === this.$route.params.id) { return item; } }); }, }, // asynchronous function - because internally we are waiting for datalist() to complete async-mounted() { this.users = await datalist() // or datalist().then(res => this.users = res) - then async is not needed } };ahora no habrá errores al inicializar el componente, ya que inicialmente las listas son una matriz vacía, pero después de ejecutar la solicitud se convertirá en lo que necesita.
Puede definir cualquier función e importarla, pero no afectará hasta que la llame; en este caso, tenemos datalist función de lista de datos importada tanto en HelloWorld como en el componente User , pero no se llamó en el componente User . por lo que su código:
data() { return { lists: datalist, }; }, hacer que lists sean iguales a la lista de datalist que es una función , ¡no una matriz ! donde .filter() debe usarse después de una matriz , ¡no una función ! esa es la razón del error. por lo tanto, debe llamar a la función datalist de datos y poner su respuesta en las lists en lugar de poner la lista de datos en datalist misma en lists
Extra:
mounted , created o...HelloWorl y pasarlo al componente User a través de props