HelloWorld.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>Issue with the code above, I'm unable to get the query string params dynamically. Getting as undefined
Is there any way to pass them dynamically?
You should have
import axios from "axios";
export const deploymentattribute = ({ servicetype, id }) =>
axios.get(
`http://10.11.12.13:3000/servicedetail/?servicetype=${servicetype}&id=${id}`
);
and
<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>
Because you don't have the this context by default in a js file.
Get the params id either by:
let urlParams = new URLSearchParams(window.location.search);
const id = urlParams.id;
or
const id = this.$route.query.id;
Then instead of quotes use template literal to use variable value inside a string:
export const deploymentattribute = ({ servicetype, id }) =>
axios.get(`http://example.com/servicedetail/?servicetype=. {servicetype}&id=${id}`);
);