laravel 如何将数据（json）传递给 vue 实例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40933469/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to pass data(json) to vue instance
提问by xAoc
I have a simple Vue instance and want to pass json from the backend to vue without HTTP request because it's always the same.
我有一个简单的 Vue 实例，想在没有 HTTP 请求的情况下将 json 从后端传递给 vue，因为它总是相同的。
I've tried do this with props, but it doesn't work...
In DOM it's looks like <div id="my-component" prices="[object Object]">Vue debug tool show me image as an empty string, and in console undefined
我试过用道具来做这个，但它不起作用......在DOM中它看起来像<div id="my-component" prices="[object Object]">Vue调试工具将图像显示为空字符串，并在控制台中undefined
<div id="my-component" :prices="{{ $prices }}">
</div>
<script>
new Vue({
el: '#my-component',
props: ['prices'],
mounted: function() {
console.log(this.image);
},
});
</script>
where $pricesjson encoded array.
其中$pricesjson 编码数组。
回答by GuyC
Your solution was nearly there but you don't need a prop, rather use a data attribute and assign the JSON via a method:
您的解决方案几乎就在那里，但您不需要道具，而是使用数据属性并通过方法分配 JSON：
new Vue({
el: '#app',
data: {
json: {},
},
methods: {
setJson (payload) {
this.json = payload
},
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app" :json="setJson({ foo: 'bar' })">
<pre>{{ json }}</pre>
</div>You would just assign your Laravel data to the setJson methods payload, i.e.
您只需将 Laravel 数据分配给 setJson 方法有效负载，即
:json="setJson({{ $prices }})
回答by Mihai Vilcu
I don't know if there is any Laravel helper for this but I will present a generic approach.
我不知道是否有任何 Laravel 帮助程序，但我将介绍一种通用方法。
One option would be to store you JSON data in a global variable and the page loads and then use it in your js files.
一种选择是将 JSON 数据存储在全局变量中，然后加载页面，然后在 js 文件中使用它。
Basically you need to generate some html similar to:
基本上你需要生成一些类似于：
<script>
window.myApp = window.myApp || {};
window.myApp.userData = { "firstName": "John", "lastName": "Doe" };
</script>
Then from javascript you should be able to access the myApp.userData variable and use it when initializing the Vue component.
然后从 javascript 您应该能够访问 myApp.userData 变量并在初始化 Vue 组件时使用它。
new Vue({
el: '#app',
data: {
userData: myApp.userData
}
});
Here is an example:
下面是一个例子：
new Vue({
el: '#app',
data: {
userData: myApp.userData
}
});<script>
window.myApp = window.myApp || {};
window.myApp.userData = { "firstName": "John", "lastName": "Doe" };
</script>
<div id="app">
Hello {{userData.firstName}}
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>回答by Berci
I have upvoted this answerfirst, but I have to change my vote (can't do it actually not enough reputation...).
我首先赞成这个答案，但我必须改变我的投票（不能这样做实际上没有足够的声誉......）。
Please do not set the data this way, because it will trigger an error like this:
[Vue warn]: You may have an infinite update loop in a component render function
请不要这样设置数据，因为它会触发这样的错误：
[Vue warn]: You may have an infinite update loop in a component render function
If anything will use the data you set this way (watch, render components based on it) you will have an infinite loop.
如果有任何东西会使用您以这种方式设置的数据（观察，基于它渲染组件），您将有一个无限循环。
When you use this method:
当您使用此方法时：
- you set the data in the render function (in the template)
- if something triggers a re-render, the data will be set again
- anything using this data will have to re-render, which may cause a re-render on the main vue instance
- 您在渲染函数中设置数据（在模板中）
- 如果某事触发重新渲染，数据将再次设置
- 使用此数据的任何内容都必须重新渲染，这可能会导致在主 vue 实例上重新渲染
This will cause the infinite loop.
这将导致无限循环。
LinusBorg have an explanation here.
LinusBorg 有一个解释here。
