Home > Article > Backend Development > laravel - How to use PHP to pass data to vuejs when initializing the page?
laravel - How to use PHP to pass data to vuejs when initializing the page?
- WBOYOriginal
- 2016-07-06 13:52:041842browse
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>
Reply content:
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>
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>
<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>
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
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>
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>
Anyway, I wrote an interface and called it in ready