weixin_42268845 2021-06-06 09:11 采纳率: 57.1%
浏览 41
已采纳

JSON别人帮忙做的,不知道哪里错了有大佬帮我改下吗?

就这样吧,以后自己替换JSON数据就行了,麻烦采纳下。

提取做的题目和答案.zip

https://wwx.lanzoui.com/iHLHopun5sb   

他做好的显示 可是我打开报错的

我打开提示这个 怎么回事 

{{index + 1}}、{{item.subjectTitle}}

{{detail.optionTitle}}

谢谢大佬们 

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2021-06-06 14:22
    关注

    第一点,文件路径有问题,使用了绝对路径,如果直接拖进或者双击使用浏览器打开,无法加载js文件

    <script src="/jquery.js"></script>
    <script src="/vue.js"></script>
    <script src="/iview.js"></script>

    ====》改成下面的,去掉/,但是html文件需要和3个js文件在同一个目录

    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script src="iview.js"></script>

    第二点,代码里面使用到了ajax加载资源,需要搭建服务器通过http协议访问才行,要不按照第一点的方式打开,ajax除了ie6浏览器,不允许访问本地资源。如果你的是chrome浏览器,可以配置chrome启动允许ajax访问本地资源,具体看这个问题中我的回答:https://ask.csdn.net/questions/7440588

    注意:添加参数后要将chrome全部关闭,在重新打开才行


    或者不用ajax加载,data.json数据源改为js文件,然后给数据起个变量名,通过script加载数据源。

    办法如下。将data.json命令为data.js,然后记事本打开data.js,开头部分新增如下加粗内容,将数据存储到js变量中。

    var questions={。。。原来的内容,就新增黑色的部分

     

    data.html改为如下就可以了。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>提取做的题目和答案</title>
      <link rel="stylesheet" href="/iview.css">
      <style>
        body {
          box-sizing: border-box;
          padding: 20px 0;
          background-color: #f8f8f8;
        }
        .ivu-card + .ivu-card {
          margin-top: 20px;
        }
        .ivu-form .ivu-form-item:last-of-type {
          margin-bottom: 0;
        }
      </style>
    </head>
    <body>
      <div id="app">
        <Row>
          <i-col span="20" offset="2">
            <Card v-for="(item, index) in list" :key="index">
              <p slot="title">{{index + 1}}、{{item.subjectTitle}}</p>
              <i-form>
                <Form-item v-for="(detail, i) in item.subjectOptionVOList" :key="i">
                  <Radio :value="is_check(item.answer, detail.optionId)" :disabled="!is_check(item.answer, detail.optionId)">{{detail.optionTitle}}</Radio>
                </Form-item>
              </i-form>
            </Card>
          </i-col>
        </Row>
      </div>
    </body>
    <script src="jquery.js"></script>
    <script src="vue.js"></script>
    <script src="iview.js"></script>
    <script src="data.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
            list: questions.data.subjectList,
        },
        methods: {
          is_check(answer, optionId) {
            const optionArr = answer.split('&');
            return optionArr.includes(optionId);
          }
        }
      })
    </script>
    </html>

    效果如下

     

    帮助到你可以点击采纳支持下哦,谢谢。。~

     

    也可以点击这里下载修改过的文件。https://download.csdn.net/download/technologist_40/19416832

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题