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

Question

我有一个简单的 Vue 实例，并且想在没有 HTTP 请求的情况下将 json 从后端传递到 vue，因为它总是相同的。

我试过用 Prop 来做这个，但它不起作用...... 在 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 编码的数组。

Answer 1

您的解决方案就快完成了，但您不需要 prop，而是使用数据属性并通过方法分配 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 }})