Axios 响应数据未加载到 Laravel 中的 Vue 组件上

Posted 2023-03-14

【中文标题】Axios 响应数据未加载到 Laravel 中的 Vue 组件上

【英文标题】：Axios response data is not loading on Vue component in Laravel

【发布时间】：2021-06-08 12:36:21

【问题描述】：

希望你们一切都好！我在将数据从 axios 响应传递到数据属性时遇到了一点问题。从数据库获取的数据在获取后显示在控制台上，但是当我想在组件上显示它时，它显示一个空数组。提前致谢

Vue 组件脚本：

<script>
    import axios from 'axios';
    export default 
         data()
                return 
                        Templates:[],
                        loading:true
                    
        ,
        async mounted() 
            await axios.post('/getTemplates')
                .then(response =>this.Templates =response.data )
                .catch(error => console.log(error.message))
                console.log(this.Templates)
        

    

</script>

我在组件上使用 Templates 调用了 data 属性：

<article class="overflow-hidden rounded-lg shadow-lg max-w-lg">
  <a href="#">
  </a>
      Templates
  <header class="flex items-center justify-between leading-tight p-2 md:p-4">
      <h1 class="text-lg">
          <a class="no-underline text-black" href="#">
          </a>
      </h1>
      <p class="text-grey-darker text-sm">
          Text
      </p>
  </header>
  <footer class="relative flex items-center justify-between leading-none p-2 md:p-4">
      <a class="flex items-center no-underline hover:underline text-black" href="#">
          <svg   viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3C17.5915 3 22.2898 6.82432 23.6219 12C22.2898 17.1757 17.5915 21 12 21C6.40848 21 1.71018 17.1757 0.378052 12C1.71018 6.82432 6.40848 3 12 3ZM12 19C7.52443 19 3.73132 16.0581 2.45723 12C3.73132 7.94186 7.52443 5 12 5C16.4756 5 20.2687 7.94186 21.5428 12C20.2687 16.0581 16.4756 19 12 19Z" fill="currentColor" /></svg>
      </a>
      <a class="flex no-underline hover: no-underline text-red-dark bg-blue hover:bg-blue-light text-white font-bold text-lg border-b-4 border-blue-dark hover:border-blue absolute bg-blue-500 rounded-lg px-1 py-1 transition duration-300 ease-in-out hover:bg-blue-600 right-3" href="#">
          <span>Select</span>
      </a>
  </footer>
</article> 

刀片模板：

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">

            <!-- Column -->
            <div class="my-1 px-1 w-full md:w-1/2 lg:my-4 lg:px-4 lg:w-1/3">
                <!-- Template -->
                <div id="app">
                    <buzzevent-template></buzzevent-template>
                </div>
                <!-- End Template -->
            </div>
            <!--End Column -->
            </div>
        </div>
    </div>
    <script src="asset('js/app.js')"></script>

</x-app-layout>

如果您需要更多详细信息，请询问。

输出：

---

Result Image

【问题讨论】：

你想在Templates数组中显示什么？

@Andrew 想看看它是否先加载！然后我可以使用特定的属性

不确定，但我的猜测是您对 axios 响应的处理不正确。 await + .then() 是对单个承诺的双重处理。删除我想说的await。

@Baamelyoussef 将 Templates 更改为 Templates.length 看看你会得到什么

@Andrew 我得到一个 0

【参考方案1】：

看起来 ES6 语法有点不对劲，请将 大括号添加到您的 .then() 中，例如：

<script>
    import axios from 'axios';
    export default 
         data()
                return 
                        Templates:[],
                        loading:true
                    
        ,
        async mounted() 
            await axios.post('/getTemplates')
                .then(response =>  this.Templates = response.data )
                .catch(error =>  console.log(error.message) )
                console.log(this.Templates)
        

    

</script>

语法：https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Promise/then

看看下面的 SO 问题：Issue displaying updated data in Vue component after axios POST

【讨论】：

试过了，控制台不再显示数组了：``` [ob: Observer] length: 0 ob: Observer value: Array (0), dep: Dep, vmCount: 0__proto__: Array ``` 并且数组还是空的

数组仍然为空@Andrew，可能问题出在刀片模板或 laravel 相关。请检查上面编辑过的问题。顺便说一句，我在控制台中再次未定义

【参考方案2】：

终于解决了！ 结果两次导入（js / app.js）。首先在 app.blade.php 布局模板中，然后在我调用组件的实际模板中。 就是这样。