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

Posted 2023-02-22

【中文标题】如何将数据（json）传递给vue实例

【英文标题】：How to pass data(json) to vue instance

【发布时间】：2017-04-17 10:31:40

【问题描述】：

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

【参考方案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 注释。

【参考方案2】：

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

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

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

当你使用这个方法时：

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

这将导致无限循环。

LinusBorg 有解释here.

【参考方案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 )

【讨论】：

太棒了，这就是我要找的！

【参考方案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>

【讨论】：

是的，这是可行的方法。但它可以在没有额外变量的情况下完成吗？使用一些绑定或类似的东西？

这个想法是您需要在页面的某处公开该信息。这可以在变量、数据属性等上完成。使用这样的变量（在命名空间中）可以随着应用程序的增长而轻松推理。

是的，我理解这个想法。我问过原生的vue方式。如果没有办法以更清晰的方式做到这一点，我会这样做。