尼克葱 2022-03-11 14:12 采纳率: 57.1%
浏览 73
已结题

vuejs3 简单 调用 json 并且在template里面显示数据的问题

问题遇到的现象和发生背景

0基础初步学习vuejs3，目前打算直接在原有的html代码中使用vuejs，尝试外部调用json，然后显示相应数据。

问题相关代码，请勿粘贴截图

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{info.name}}</div>
<script>
    import { someData } from './data.json';
  Vue.createApp({
    data() {
      return {
          info: someData
      }
    }
  }).mount('#app')
</script>
</body>
</html>

JSON


{"name":"John", "age":30, "car":null}
运行结果及报错内容

报错：Uncaught SyntaxError: Cannot use import statement outside a module

我想要达到的结果

能够读取到json，然后将name字段的John显示在template里面

  • 写回答

4条回答 默认 最新

  • 音药 2022-03-11 15:46
    关注
    
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
 
<body>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="app">
    {{info.name}}
</div>
<script>
  let someData = $.ajax({url:"./data.json",async:false});
  someData = JSON.parse(someData.responseText)
  Vue.createApp({
    data() {
      return {
          info: someData
      }
    }
  }).mount('#app')
</script>
</body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    1人已打赏
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 3月20日
  • 已采纳回答 3月12日
  • 赞助了问题酬金5元 3月11日
  • 创建了问题 3月11日

悬赏问题

  • ¥15 使用yolov5-7.0目标检测报错
  • ¥15 对于这个问题的解释说明
  • ¥200 询问：python实现大地主题正反算的程序设计，有偿
  • ¥15 smptlib使用465端口发送邮件失败
  • ¥200 总是报错，能帮助用python实现程序实现高斯正反算吗？有偿
  • ¥15 对于squad数据集的基于bert模型的微调
  • ¥15 为什么我运行这个网络会出现以下报错？CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥20 java在应用程序里获取不到扬声器设备