Vue.js (Nuxt) 返回 JSON 数据
Posted
技术标签:
【中文标题】Vue.js (Nuxt) 返回 JSON 数据【英文标题】：Vue.js (Nuxt) Return JSON Data 【发布时间】：2021-10-17 09:40:34 【问题描述】：我尝试使用Nuxt.js 制作JSON API。但是我请求了一个 URL 并且返回了 html 代码（网站的源代码。如：view-source:https://website.com）。
我怎样才能让 JSON 改为返回？
API 代码如下：
<template>
<div>
user
</div>
</template>
<script>
import data from "../assets/data.json";
export default
data()
return
user: data
</script>
这里是返回的数据，网站的html 源（我尝试在本地主机上工作）：
<!doctype html> <html data-n-head-s-s-r lang="en" data-n-head="%7B%22lang%22:%7B%22s-s-r%22:%22en%22%7D%7D"> <head > <title>drackin-api</title> <meta data-n-head="s-s-r" charset="utf-8"> <meta data-n-head="s-s-r" name="viewport" content="width=device-width, initial-scale=1"> <meta data-n-head="s-s-r" data-hid="description" name="description" content=""> <meta data-n-head="s-s-r" name="format-detection" content="telephone=no"> <link data-n-head="s-s-r" rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="preload" href="/_nuxt/runtime.js" as="script"><link rel="preload" href="/_nuxt/commons/app.js" as="script"><link rel="preload" href="/_nuxt/vendors/app.js" as="script"><link rel="preload" href="/_nuxt/app.js" as="script"><link rel="preload" href="/_nuxt/pages/bot.js" as="script"><style data-vue-s-s-r-id="3191d5ad:0"> .nuxt-progress position: fixed; top: 0px; left: 0px; right: 0px; height: 2px; width: 0%; opacity: 1; transition: width 0.1s, opacity 0.4s; background-color: black; z-index: 999999; .nuxt-progress.nuxt-progress-notransition transition: none; .nuxt-progress-failed background-color: red; </style><style data-vue-s-s-r-id="0e36c2db:0"> .nuxt__build_indicator[data-v-71e9e103] box-sizing: border-box; position: fixed; font-family: monospace; padding: 5px 10px; border-radius: 5px; box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2); width: 88px; z-index: 2147483647; font-size: 16px; line-height: 1.2rem; .v-enter-active[data-v-71e9e103], .v-leave-active[data-v-71e9e103] transition-delay: 0.2s; transition-property: all; transition-duration: 0.3s; .v-leave-to[data-v-71e9e103] opacity: 0; transform: translateY(20px); svg[data-v-71e9e103] display: inline-block; vertical-align: baseline; width: 1.1em; height: 0.825em; position: relative; top: 1px; </style> </head> <body > <div data-server-rendered="true" id="__nuxt"><!----><!----><div id="__layout"><pre> [object Object] </pre></div></div><script>window.__NUXT__=(function(a)return layout:"default",data:[],fetch:,error:a,serverRendered:true,routePath:"\u002Fbot",config:_app:basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:a,logs:[](null));</script><script src="/_nuxt/runtime.js" defer></script><script src="/_nuxt/pages/bot.js" defer></script><script src="/_nuxt/commons/app.js" defer></script><script src="/_nuxt/vendors/app.js" defer></script><script src="/_nuxt/app.js" defer></script> </body> </html>
但这就是我想要返回的：
"username": "drackin",
"email": "myemail@gmail.com",
"location": "Turkey"
我该怎么做？任何帮助表示赞赏????。
【问题讨论】：
【参考方案1】：user 不是字符串而是对象。因此 vue 会渲染 [object object]
<template>
<div>
<p>username: user.username</p>
<p>email: user.email</p>
<p>location: user.location</p>
</div>
</template>【讨论】：
感谢您的评论，但同样如此。再次返回 Html 代码以上是关于Vue.js (Nuxt) 返回 JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章