I have been trying to follow the tutorial, where to place the callRestService () in Hello.vue?

[gitercn]

I'm trying to follow the tutorial, I have created the empty vue project using vue create frontend --no-git and then till this step: Calling a REST service with Axios is simple. Go into the script area of your component, e.g. Hello.vue and add:

import axios from 'axios'

data ();{
  return {
    response: [],
    errors: []
  }
},

callRestService ();{
  axios.get(`api/hello`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.response = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
}
}

I don't know where exactly this should be added. I created my Hello.vue file under frontend\src\views folder like this and I added it in the src\router\index.js

<template>
  <div class="hello">
    <button class=”Search__button” @click="callRestService()">CALL Spring Boot REST backend service</button>
    <h3>{{ response }}</h3>
  </div>
</template>

<script>
import axios from 'axios'

data ();{
  return {
    response: [],
    errors: []
  }
},

callRestService ();{
  axios.get(`api/hello`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.response = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
}
}
</script>

But the npm run build gives me this error:

C:\gitercn1\spring-boot-vuejs-copy\frontend\src\views\Hello.vue: 'return' outside of function (13:4)

  11 |
  12 |   data ();{
> 13 |     return {
     |     ^
  14 |       response: [],
  15 |       errors: []
  16 |     }

[fuatkarakus]

You should use data () { instead of data ();{ .

[jonashackt]

Thanks @fuatkarakus for the suggested solution. Closing then.