HolaMundo.vue
import axios from "axios"; export const deploymentattribute = ({ serv, id }) => axios.get( api cal here ................. ); <template> <div> <div v-for="(attribute, index) in attributes" :key="index"> {{ attribute.att }} </div> </div> </template> <script> import { deploymentattribute } from "./deploymentattribute"; export default { name: "DeploymentAttributeView", data() { return { attributes: [], }; }, async mounted() { const response = await deploymentattribute({ servicetype: this.$route.query.ser, id: this.$route.query.id, }); this.attributes = response.data; }, }; </script> Problema con el código anterior, no puedo obtener los parámetros de cadena de consulta dinámicamente. Obtener como undefined
¿Hay alguna forma de pasarlos dinámicamente?
Deberías
import axios from "axios"; export const deploymentattribute = ({ servicetype, id }) => axios.get( `http://10.11.12.13:3000/servicedetail/?servicetype=${servicetype}&id=${id}` );y
<template> <div> <div v-for="(attribute, index) in attributes" :key="index"> {{ attribute.attribute }} {{ attribute.value }} </div> </div> </template> <script> import { deploymentattribute } from './deploymentattribute' export default { name: "DeploymentAttributeView", data() { return { attributes: [], }; }, async mounted() { const response = await deploymentattribute({ servicetype: this.$route.query.servicetype, id: this.$route.query.id }) this.attributes = response.data }, }; </script> Porque no tiene this contexto por defecto en un archivo js .
Obtenga la identificación de parámetros ya sea por:
let urlParams = new URLSearchParams(window.location.search); const id = urlParams.id;o
const id = this.$route.query.id;Luego, en lugar de comillas, use la plantilla literal para usar el valor variable dentro de una cadena:
export const deploymentattribute = ({ servicetype, id }) => axios.get(`http://example.com/servicedetail/?servicetype=. {servicetype}&id=${id}`); );