[Vuejs]-Trying to follow a tutorial to build a spring boot vuejs project but get some errors

by

1đź‘Ť

First, you must add callRestService() in methods or handler (as you are calling the method on button click).

Second, you should remove the unnecessary ; after data() and callRestService().

Third, you should export and name your component if you’re going to reuse it somewhere.

Inside your Home.vue component, it could look like so:

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

Leave a comment