将数据传递到 vuejs 模板答案

【问题标题】：Pass data into vuejs template将数据传递到 vuejs 模板
【发布时间】：2018-08-19 12:37:57
【问题描述】：

我有一个支持 vuejs2 的 Laravel 应用程序。我在 vuejs 部分使用路由器组件。如何将会话等数据从 laravel 发送到 vuejs 模板。在我的刀片模板中，我使用 <router-view ></router-view> 来调用 vue 路由器组件。如何添加数据。

感谢您的帮助！

【问题讨论】：

你试过把它作为道具传递吗？喜欢<router-view :myProp="myData" ></router-view>
我从来没有使用过 Laravel/Blade，但是可能有一些类似的过滤器，比如 symfony 的 twig 中你可以做这样的事情：data(){ return {{ myVariable | json_encode | raw }} }。所以data(){ return ...blade outputs json here... }

标签： javascript php laravel laravel-5 vuejs2

【解决方案1】：

要使用 vuejs 路由组件加载的页面，在该页面的页脚部分添加脚本。并且使用路由器推送命令后，请刷新整个页面。

保留一个标志，例如：正在加载。首先，保持真实以查看一些初始消息，当您收到 axios 响应时，将其设置为 false。基于此标志，显示您从 axios 响应中获得的数据。当然，在得到 axios 响应后更新最初声明的数据。示例：

<script>
export default {
        data(){
            return {
                loading:true,
                // Others Data
            }
        },
        methods:{
            function_name (){
                this.$router.push('/');
                window.location.reload();
            }
        },
        mounted() {
            var _this = this;
            axios.get('/data').then(function (response) {
                //others data update
                _this.loading=false;
            });
        }
    }
</script>

【讨论】：

在 var loading为 false 之后如何更新内容？
我们可以使用 vuejs if-else。
Loading ...

//显示你的数据

【解决方案2】：

您可以使用 axios 向您的 laravel 应用发出 get 请求。

示例方法：

data() {
   return {
      data: ''
   }
},
methods: {
    getData: function () {
      axios.get("/data")
      .then((response)  =>  {
        this.data = response.data;
      }, (error)  =>  {
      })
    }
  },

注意，需要导入 axios 才能工作：

import axios form 'axios'

那你需要在服务端处理请求

【讨论】：

我已经尝试过这个问题，即模板加载速度比请求快。所以我不能将页面加载数据用于会话检查等...
也许尝试使用返回 Promise 的方法，然后尝试获取数据？如果您能向我们展示您的一些代码，那就太好了