Axios setting response data in vue component variable but variable not displaying data on browser

Question

Axios setting response data in Vue component variable but variable not displaying data on the browser. We can see data on console but when I display, Browser shows me nothing. Data are in JSON Format.

Snapshot:

Snapshot of the code

Output:

Output

  <template>

            <div class="card">
                <div class="card-header">Subject</div>
                <div class="card-body" >
                    <!-- <ul class="list-group">
                        <li class="list-group-item" :key = "message.id" v-for = "message in messages"> {{ message.subject}}</li>
                    </ul> -->
                    {{messages}}
                </div>
            </div>  

</template>
<script>
export default{
  name: 'subject-component',
    data () {
    return {
     messages:{}
    }   
  },
  mounted () {

  },
    created(){

         axios.get('http://127.0.0.1:8000/subject/get')
          .then(response => {this.messages = response.data})
          .catch((error) => console.log(error));

    }
}
</script>

https://stackoverflow.com/questions/40996344/axios-cant-set-data/41008360. — htoniv, Sep 21 '18 at 05:55
I have tried all the possibilities, but still not working. Please suggest another way to display response on the browser. — Raj, Sep 21 '18 at 06:17
please don't provide snapshots of code, it's not as helpful to as, as it's harder to modify. Also try to recreate your issue here https://codesandbox.io/s/vue — A. L, Sep 21 '18 at 06:22
please show us an example of the actual data in the `messages` json object — skribe, Sep 21 '18 at 07:14
It will definitely show the result if you get the value in `this.messages = response.data`. — htoniv, Sep 21 '18 at 07:27

score 0 · Accepted Answer · answered Sep 22 '18 at 06:27

By setting up the project again, this issue has been resolved. And again I used the same approach for axios request like.

axios.get('http://127.0.0.1:8000/get/subjects') .then((response)=>(this.subjects = response.data)) .catch(function(error){console.log(error)});

Thank you all for your effort.

Axios setting response data in vue component variable but variable not displaying data on browser

1 Answers1