javascript – 如何将数据(json)传递给vue实例

我有一个简单的Vue实例,并希望在没有HTTP请求的情况下将json从后端传递到vue,因为它始终是相同的.

我试过用道具做这个,但它不起作用……
在DOM中,它看起来像< div id =“my-component”prices =“[object Object]”>
Vue调试工具将图像显示为空字符串,并在控制台中未定义

<div id="my-component" :prices="{{ $prices }}">
</div>

<script>
        new Vue({
            el: '#my-component',
            props: ['prices'],
            mounted: function() {
               console.log(this.image);
           },
       });
</script> 

其中$price json编码数组.

解决方法:

您的解决方案几乎就在那里,但您不需要支柱,而是使用数据属性并通过方法分配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 }})

原文地址：https://codeday.me/bug/20191005/1855822.html