Axios 和 Vue3 遇到问题

Question

有人可以帮我理解我在 Axios 和 Vue3 上做错了什么吗？

我有这段代码，可以从外部获取运行它的机器的主机IP地址...

<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); // This is here so I can see it working.
  }
};
</script>

然后将返回的数据传递给一个 prop，该 prop 使用

v:bind

将其传递给我的子组件。然后子组件获取数据并从中构造一个 URL，以将命令传递到外部连接的设备。

<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>

但是这会产生以下错误，我不太明白为什么

/components/CustomerWaiting.vue:33:5 Expected ";" but found ")"
31 |              }
32 |          }
33 |      })
   |       ^
34 |  

任何帮助理解我做错了什么的帮助将不胜感激，我是 Axios 的新手，也是 Vue3 的新手。

我尝试了互联网上与错误相关的各种教程，但似乎没有帮助我解决它。

Answer 1

删除

export default

中的括号

export default ({
    name: 'waiting',
    props: ['hostname']
    ...
})

更改为：

export default {
    name: 'waiting',
    props: ['hostname']
    ...
}