laravel - How to use PHP to pass data to vuejs when initializing the page?-PHP Tutorial-php.cn

laravel - How to use PHP to pass data to vuejs when initializing the page?

WBOY

Release： 2016-07-06 13:52:04

Original

1848 people have browsed it

How to use PHP to transfer data to vuejs when the page is initialized. Now I want these data to be taken out from the database when the page is initialized, rather than written directly in js. What should I do?

<code><body>
<div id="app">
    <ul>
        <li v-for="task in tasks">{{ task.body }}</li>
    </ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.19/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:'go to  home',complete:true},
                {body:'watch tv',complete:true},
                {body:'go to bed',complete:true},
            ]
        }
    });
</script>
</body></code>

Copy after login

Reply content:

<code><body>
<div id="app">
    <ul>
        <li v-for="task in tasks">{{ task.body }}</li>
    </ul>
</div>
<script src="//cdn.bootcss.com/vue/1.0.19/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            tasks:[
                {body:'go to  home',complete:true},
                {body:'watch tv',complete:true},
                {body:'go to bed',complete:true},
            ]
        }
    });
</script>
</body></code>

Copy after login

Two ways

The writing interface provides data and is called through Ajax in ready;
Convert the data into JavaScript data type in the controller and then pass it into the blade. You can refer here: Transform PHP Vars to JavaScript

Ajax

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

Copy after login

<code>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
        }
    });</code>

Copy after login

Reference Document

I have a simple example here, you can refer to https://github.com/TIGERB/easy-vue

can be placed in ready, please refer to the official website ready

for details

Use ajax to pass json, and call the json passed by the server to render the Vue template.

<code class="js">ready: function(){
  // ajax代码
}</code>

Copy after login

Ajax acquisition, or direct php output, depending on your needs or convenience.

<code class="js">new Vue({
    el:"#app",
    data:{
        tasks: <?= json_encode($data['list']) ?>
    }
});</code>

Copy after login

Anyway, I wrote an interface and called it in ready