我有一个简单的Vue实例,并希望在没有HTTP请求的情况下将json从后端传递到vue,因为它始终是相同的。
我尝试用道具做这个,但它不起作用......
在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>
其中$prices
json编码数组。
答案 0 :(得分:12)
您的解决方案几乎就在那里,但您不需要支柱,而是使用数据属性并通过方法分配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>
您只需将Laravel数据分配给setJson方法有效负载,即
:json="setJson({{ $prices }})
答案 1 :(得分:3)
我不知道是否有任何Laravel助手,但我会提出一个通用的方法。
一种选择是将JSON数据存储在全局变量中,然后加载页面,然后在js文件中使用它。
基本上你需要生成一些类似于:
的html<script>
window.myApp = window.myApp || {};
window.myApp.userData = { "firstName": "John", "lastName": "Doe" };
</script>
然后从javascript开始,您应该能够访问myApp.userData变量并在初始化Vue组件时使用它。
new Vue({
el: '#app',
data: {
userData: myApp.userData
}
});
以下是一个例子:
new Vue({
el: '#app',
data: {
userData: myApp.userData
}
});
&#13;
<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>
&#13;
答案 2 :(得分:1)
我首先投票赞成this answer,但我必须更改投票(实际上这样做声望不足……)。
请不要以这种方式设置数据,因为它会触发如下错误:
[Vue warn]: You may have an infinite update loop in a component render function
如果有任何东西会使用您以这种方式设置的数据(观看,基于其渲染组件),则将发生无限循环。
使用此方法时:
这将导致无限循环。
LinusBorg的解释为here。
答案 3 :(得分:0)
虽然此操作很旧,但是这是我的操作方式(受Symfony 4 + VueJS中的操作方式启发):
<div id="my-component" prices-data="{{ json($prices) }}">
</div>
<script>
new Vue({
el: '#my-component',
props: ['pricesData'],
data: {
prices: null,
},
mounted: function() {
this.prices = JSON.parse(this.pricesData);
},
});
</script>
这显然是假设$ prices是一个刀刃变量。
注意:当$ prices是一个可以用json_encode()编码的简单对象时,我在上面使用@json()(调用blade json函数时会使用底层函数。但是,如果对象很复杂,请考虑使用{{ 3}},如果对象变得太复杂,则使用@MaxDepth注释。