0

I'm using Vuejs to display data from an API to a template. I'm trying to figure out why I am not returning data for the team so I can display in for the template. Right now when I use the VueJS Chrome Extention it shows that the team is an empty object.

<div v-if="team">
    <div class="row">
       <div class="col-12 col-sm-12">
          <div class="fw-700 pb3 mb5" style="border-bottom: 1px solid #333;">Name:</div>
       <div class="mb10" style="font-size: 20px;">{{ team.name }}</div>
   </div>
</div>


<script>

    module.exports = {
        http: {
            headers: {
               'X-CSRF-TOKEN': window.Laravel.csrfToken
            }
        },
        props: [ 'id', 'editable' ],
        data: function(){
            return {
                modalName: 'additionalInfo',
                team:{

                }
            }
        };
     },
     methods: {
         fetchInfo: function(){
             this.$http.get('/api/teams/info', { params: { id: this.id } }).then((response) => {
             this.team = response.data;
         });
      },
    },
  }
}
</script>
Improve this question

1 Answer 1

Reset to default
2

It is empty because your method fetchInfo isn't being called, so you need to do something like this: 

created () {
 this.fetchInfo()
}

This will call the function fetchInfo which in turn will fetch and fill this.team

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I'm still learning but yes thank you. That was the simple solution.