Can someone assist me in figuring out what is going wrong with my Axios and Vue3 implementation?
The code I have makes an external call to retrieve the host IP Address of the machine it's running on...
<template>
<div id="app">
<Incoming :hostname="hostname" />
</div>
</template>
<script lang="ts">
import axios from 'axios'
import CustomerWaiting from "./components/Incoming.vue";
export default {
name: "app",
components: { Incoming },
data() {
return {
hostname: ''
}
},
mounted() {
axios.get('https://api.ipify.org?format=json')
.then((response) => {
this.hostname = response.data.ip
})
console.log(this.hostname); // Added for debugging purposes.
}
};
</script>
This data is then passed to a prop which is further used by a child component via v:bind. The child component utilizes the data to create a URL that sends commands to an externally connected device.
<template>
<button @click="hello">HELLO</button>
<button @click="timePlease">TIME PLEASE</button>
<button @click="outtaHere">I AM OUTTA HERE</button>
</template>
<script lang="ts">
import axios from 'axios';
let self = this;
export default({
name: 'waiting',
props: ['hostname'],
methods: {
hello() {
axios({
url: `http://${self.hostname}:8989/?action=doSomething&additional=true`,
headers: { accesstoken: 'myAccessToken' }
});
},
timePlease() {
axios({
url: `http://${self.hostname}:8989/?action=doSomething&additional=true&anothere=true`,
headers: { accesstoken: 'myAccessToken' }
});
},
outtaHere() {
axios({
url: `http://${self.hostname}:8989/?action=doNothing`,
headers: { accesstoken: 'myAccessToken' }
});
}
}
});
</script>
Despite following multiple online tutorials, I am encountering some errors which are perplexing me. Any guidance on where I may be going wrong would be highly appreciated since I'm relatively new to both Axios and Vue3.
I've attempted various solutions related to the error but haven't been able to sort it out.