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

新手上路,请多包涵

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

原文由 xAoc 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 625
2 个回答

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

原文由 GuyC 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 Mihai Vilcu 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题