使用Axios在数据库中显示数组

Question

我使用Axios遇到了麻烦（我的代码将遵循），但是当我使用{{response.data}}时，该站点断开，并在删除它后立即给我一个空白页，它可以正常工作。我不太确定我在做什么错，我非常适合使用Vue，Vuetify和Axios。

我有一个用于数据库的本地服务器，并且Get Request Link可以正常运行。它显示3列字符串和1个数组，我希望从数组中获取数据。

<template>
<v-app id="inspire"
     style="background-color: #e4e4e4">
<!-- to be deleted-->
<v-app-bar-nav-icon style="padding-left: 80px">
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">Login</router-link>
      <br>
      <vbtn>Logout</vbtn>
    </nav>
    <router-view/>
  </div>
</v-app-bar-nav-icon>
<!--end-->
<!-- profiles to login to-->
<v-main style="padding: 10rem">
  <v-container>
    <v-row>
      <v-col
          v-for="n in 10"
          :key="n"
          cols="5"
          style="background-color: #e4e4e4;">
        <v-card height="200" style="background-color: #a3a3a3; text-align: center">{{n}}</v-card>
      </v-col>
    </v-row>
  </v-container>
</v-main>
<!-- profiles to login to end-->
</v-app>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld' ,
  mounted () {
  axios
    .get("http://localhost:8081/contractor?user_id=c65722")
    .then((response) => {
      this.posts = response.data
    })
  },
  data: () => ({
    ecosystem: [],
    importantLinks: [],
  }),
  methods: {}
}
</script>

'