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

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

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • CSDN专家-Time 2021-06-06 09:12

    这个是el表达式;需要js才能正常显示。不能直接打开。

    要用node运行。

    评论
    解决 无用
    打赏 举报
  • 有问必答小助手 2021-06-07 19:05

    您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~

    如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~

    ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题