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

Question

伙计们希望你们一切都好！我在将数据从 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}} 调用了数据属性 :

<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 width="24" height="28" 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>

Blade 模板：

    <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

Answer 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 问题：

Answer 2

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

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

Axios response data is not loading on Vue component in Laravel

javascript

laravel

vue.js

laravel-blade

axios