CODEWITHSUNDEEP
jsonlaravelvue.jsaxiossingle-page-application
65535
65535

Reputation: 553

Laravel Vue SPA: How to correctly retrieve a json object from Laravel and print it out?

Laravel Vue SPA: How to correctly retrieve a json object from Laravel and test print it out to the console.log() from within the Vue component?

The json object is correctly available at somedomain.com/channellist. It is then retrieved by axios.

Any help would be greatly appreciated.

Vue component:

<template>
    <div id="app">      
            <vue-chat :channels="channels"></vue-chat>  
    </div>
</template>

<script>

  export default {
 
    data() {
      return {
        
        channels: {},
        
      }
    },
   
   methods: {
    
        getChannels(){
            this.loading = true
            var url = "/channellist"
                
            axios
              .get(url)
              .then(response => (this.channels = response.data.channels))
            },     
    },
    
    watch: {

    },
    
    components: {
     
    },
    
    created() {
     
      this.getChannels()
   
    }
  }
</script>
<style>
    #app {
        margin-left: 1em;
    }

    .heading h1 {
        margin-bottom: 0;
    }
</style>

json object returned from Laravel at somedomain.com/channellist:

{"channels":[{"id":1,"name":"channel 1","created_at":"2020-07-10T06:03:14.000000Z","updated_at":"2020-07-10T06:03:14.000000Z"},{"id":2,"name":"channel 2","created_at":"2020-07-10T06:03:14.000000Z","updated_at":"2020-07-10T06:03:14.000000Z"},{"id":3,"name":"channel 3","created_at":"2020-07-10T06:03:14.000000Z","updated_at":"2020-07-10T06:03:14.000000Z"}]}

Upvotes: 0

Views: 443

Answers (1)

Japs
Japs

Reputation: 1052

Since you set the channels data in the promise you can loop through it in the template

Note: change channels: {} to array channels: []

<template>
    <div id="app">      
       <vue-chat :channels="channels"></vue-chat>
       <div v-for="channel in channles" :key="channel.id">
          <label>Channel Name</label>
          <input type="text" readonly :value="channel.name">
          <br>
          <label>Channel Name</label>
          <input type="text" readonly :value="channel.created_at">
       </div>
    </div>
</template>

Upvotes: 1

Related Questions