Попытка следовать руководству по созданию проекта весенней загрузки vuejs, но с ошибками

Question

Я пытаюсь следовать этому уроку https://github.com/jonashackt/spring-boot-vuejs, чтобы создать загрузочную пружину с проектом vuejs, я создал пустой проект vue с использованием vue create frontend --no-git и затем до этого шага: «Вызов службы REST с помощью Ax ios прост. Go в область сценария вашего компонента, например, Hello. vue и добавьте:«

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

Я не знаю, где именно это должно быть добавлено. Я создал свой файл Hello. vue в папке frontend \ src \ views следующим образом и добавил его в 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>

Но сборка npm run дает мне эта ошибка:

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

Answer 1

Сначала вы должны добавить callRestService() в methods или обработчик (как вы вызываете метод при нажатии кнопки).

Во-вторых, вы должны удалить ненужные ; после data() и callRestService().

В-третьих, вы должны export и name свой компонент, если вы собираетесь использовать его где-нибудь еще.

Внутри вашего Home.vue компонента это может выглядеть так:

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

  export default {
    name: "HelloComponent",
    data() {
      return {
        response: [],
        errors: []
      }
    },
    methods: {
      callRestService() {
        axios.get(`api/hello`)
          .then(response => {
            // JSON responses are automatically parsed.
            this.response = response.data
          })
          .catch(e => {
            this.errors.push(e)
          })
      }
    }
  }
</script>