当前位置:Gxlcms > PHP教程 > laravel-如何使用PHP在页面初始化的时候想vuejs中传递数据?

laravel-如何使用PHP在页面初始化的时候想vuejs中传递数据?

时间:2021-07-01 10:21:17 帮助过:5人阅读

如何使用PHP在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的,而不是直接写在js里的,该怎么做?



    
  • {{ task.body }}

回复内容:

如何使用PHP在页面初始化的时候想vuejs中传递数据,现在我想这些数据都是页面初始化的时候从数据库中取出的,而不是直接写在js里的,该怎么做?



    
  • {{ task.body }}

两种办法

  1. 写接口提供数据,在ready中通过Ajax 调用;

  2. 在控制器里把数据转换成JavaScript 数据类型,然后传入blade。可以参考这里: Transform PHP Vars to JavaScript

Ajax

    new Vue({
        ready: function(){
            // ajax代码
        }
    })

new Vue({
        el:"#app",
        data:function(){
            // 
            var that = this;
            return {
                title:'我是标题',
                tasks:[
                    {body:'go to  home',complete:true},
                    {body:'watch tv',complete:true},
                    {body:'go to bed',complete:true},
                ]
            };
        },
        methods:{
            getData:function(){
                // 获取数据
            }
        },
        ready:function(){
            // 如果初始化时需要读取属性值,我会在ready初始化
            
            var that = this;
            console.log(that.title);// 获取到的title 是  '我是标题'
            that.title = "标题";
            console.log(that.title);// 获取到的title 是  '标题'
        },
        init:function(){
            // 如果初始化时不需要读取属性值,我会在init初始化
            var that = this;
            console.log(that.title);//获取到的title是undefined
        }
    });

参考文档

我这有个简单的示例你可以参考下https://github.com/TIGERB/easy-vue

可以放在ready中,具体参考官网ready

使用ajax传递json,调用服务器传递的json对Vue模板进行渲染。

ready: function(){
  // ajax代码
}

ajax获取,或者直接php输出,看你需求或者怎么方便了。

new Vue({
    el:"#app",
    data:{
        tasks: 
    }
});

反正我是写个接口在 然后在ready 里调用的

人气教程排行