Laravel Vue SPA：如何从 Laravel 正确检索 json 对象并将其打印出来？

Posted 2023-03-14

【中文标题】Laravel Vue SPA：如何从 Laravel 正确检索 json 对象并将其打印出来？

【英文标题】：Laravel Vue SPA: How to correctly retrieve a json object from Laravel and print it out?

【发布时间】：2020-10-30 20:14:15

【问题描述】：

Laravel Vue SPA：如何从 Laravel 正确检索 json 对象并在 Vue 组件内测试将其打印到 console.log()？

json 对象在somedomain.com/channellist 正确可用。 然后由axios 检索。

任何帮助将不胜感激。

Vue 组件：

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

从 Laravel 返回的 json 对象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"]

【参考方案1】：

由于您在 Promise 中设置了 channels 数据，因此您可以在模板中循环遍历它

注意：将channels: 改为数组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>