如何将数据（json）传递给vue实例

Question

我有一个简单的 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 编码数组。

Answer 1

虽然这个操作很旧，但我会这样做（灵感来自我在 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()（调用刀片 json 函数时会使用底层函数。如果对象很复杂，请考虑使用 @987654321如果对象变得过于复杂，则 @ 带有 @MaxDepth 注释。

Answer 2

我首先投票赞成this answer，但我必须改变我的投票（不能这样做实际上没有足够的声誉......）。

请不要这样设置数据，因为它会触发这样的错误： [Vue warn]: You may have an infinite update loop in a component render function

如果有任何东西会使用你以这种方式设置的数据（观察，基于它渲染组件）你将有一个无限循环。

当你使用这个方法时：

1. 您在渲染函数中设置数据（在模板中）
2. 如果有什么东西触发了重新渲染，数据将被重新设置
3. 使用此数据的任何内容都必须重新渲染，这可能会导致 在主 vue 实例上重新渲染

这将导致无限循环。

LinusBorg 有解释here.

Answer 3

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

Answer 4

我不知道是否有任何 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
  }
});

<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>