Question

当我尝试从另一个模块导入json数据时，Vue引发错误

我正在开发一个测试系统，该系统将为您提供一篇文章，然后根据该文章为您提供几个测试。我遇到了无法从.js文件导入简单的模拟JSON对象的问题。
我正在尝试从Article组件内的“ api.js”导入文件对象。

这是我的Article.vue文件

import Player from "../Player";
import files from "../modules/level/api";

export default {
  data() {
    return {
      files: files,
    };
  },
  mounted() {
    console.log(this.quiz);
  },
  components: {
    Player
  }
};

/***************** Audio start*/
.player {
  padding-left: 256px;
}

.audio-file {
  display: flex;
  margin: 24px 0;
  align-items: center;
}

.audio-file-process {
  margin-left: 8px;
}

.audio-file-title {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.01em;

  color: #acacac;
}

.audio-time {
  font-size: 10px;
  line-height: 10px;
  letter-spacing: 0.01em;

  color: #bbbbbb;
}

.audio-process-bar {
  width: 100%;
  height: 4px;
  background-color: #f4f4f4;
}

.audio-process-bar-active {
  width: 20%;
  height: 4px;
  background-color: #109cf1;
  position: relative;
}

.audio-process-bar-active:after {
  content: " ";
  background-color: #109cf1;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: -2.1px;
  right: -5px;
}

.audio-file-btn {
  width: 36px;
  height: 36px;
  background-color: #109cf1;
  position: relative;
  border-radius: 50%;
}

.audio-file-btn img {
  position: absolute;
  top: 11px;
  left: 13px;
}

/***************** Audio end*/

article {
  text-align: left;
  padding: 25px 32px 25px 32px;
  width: 67%;
}

.article-content .sidebar {
  height: 277px;
}

.sidebar {
  text-align: left;
  margin-left: 30px;
  width: 33%;
}

.current,
.next {
  padding-left: 32px;
  padding-right: 32px;
}

.current,
.next {
  padding-top: 24px;
  padding-bottom: 24px;
}

.next-title {
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.01em;
  color: #acacac;
}

.item-title {
  margin-left: 17px;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.01em;
}

.next {
  background-color: #f8f8f8;
}

.next-item {
  padding: 16px 0;
}

.next-item:not(:last-child) {
  border-bottom: 1px solid #dcdcdc;
}

.article-title {
  font-size: 18px;
  line-height: 21px;
  margin-bottom: 25px;
  letter-spacing: 0.01em;
}
.article-content {
  font-size: 15px;
  line-height: 18px;
  letter-spacing: 0.01em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="container main">
    <div class="top-nav">
      <div class="go-back">
        <img src="../../assets/goback.png" alt />
        Назад
      </div>
      <div class="control-btns">
        <img src alt />
        <img src alt />
      </div>
    </div>
    <div class="player">
      <Player></Player>
    </div>
    <div class="content flex article-content">
      <article class="main-bg">
        <h1 class="article-title">
          <img src="../../assets/headphone.png" alt />
          Содержание указа президента РУз от 18 Апреля 2019 года
        </h1>
        <p class="article-content">
          Fugiat laborum dolor adipisicing duis sint ea duis voluptate. Tempor labore esse incididunt esse exercitation cillum qui eu Lorem tempor eiusmod proident. Officia mollit proident eiusmod nulla nisi aliqua culpa. Aute nulla duis eiusmod reprehenderit. Lorem non qui amet aliquip laboris voluptate ut. Laboris voluptate sint ut sint qui.
          <br />Adipisicing ipsum enim sint pariatur officia nulla nisi velit occaecat esse voluptate dolore est. Elit sit non irure duis dolore laborum cupidatat. Excepteur pariatur sunt officia amet nostrud esse pariatur minim Lorem laborum laboris.
          <br />In nostrud do esse in et adipisicing ex nulla cillum non consectetur sit labore enim. Ex laborum nisi in veniam ullamco sint nisi sunt amet excepteur Lorem. Et anim irure sunt culpa officia et sunt nostrud occaecat voluptate do veniam. Sint proident ipsum id nisi pariatur tempor ex mollit voluptate amet anim nisi. Enim qui fugiat esse irure magna non quis. Consectetur in laboris incididunt culpa excepteur deserunt irure laborum sint.
          <br />Pariatur id dolor sunt exercitation nulla ipsum est adipisicing occaecat sunt sint. Consectetur cillum incididunt sunt laboris officia in eiusmod eu. Consequat consequat laboris voluptate mollit sit consectetur elit aliquip. Pariatur esse dolor fugiat adipisicing exercitation excepteur in cupidatat exercitation tempor elit.
          <br />Enim irure consectetur tempor do mollit culpa mollit fugiat eu anim dolore qui aliquip. Magna dolore qui id ut aliqua in pariatur nisi et anim ut pariatur minim proident. Ut officia ea sunt magna in pariatur officia cupidatat nisi anim nulla non reprehenderit fugiat. Laborum cillum in amet ipsum ullamco aliquip proident quis qui tempor excepteur do proident. In non Lorem elit ex minim nulla est deserunt sunt. Veniam proident magna esse amet deserunt incididunt officia veniam duis in. In ullamco elit pariatur officia ipsum tempor officia esse culpa id dolore id nostrud.
          Fugiat laborum dolor adipisicing duis sint ea duis voluptate. Tempor labore esse incididunt esse exercitation cillum qui eu Lorem tempor eiusmod proident. Officia mollit proident eiusmod nulla nisi aliqua culpa. Aute nulla duis eiusmod reprehenderit. Lorem non qui amet aliquip laboris voluptate ut. Laboris voluptate sint ut sint qui.
          <br />Adipisicing ipsum enim sint pariatur officia nulla nisi velit occaecat esse voluptate dolore est. Elit sit non irure duis dolore laborum cupidatat. Excepteur pariatur sunt officia amet nostrud esse pariatur minim Lorem laborum laboris.
          <br />In nostrud do esse in et adipisicing ex nulla cillum non consectetur sit labore enim. Ex laborum nisi in veniam ullamco sint nisi sunt amet excepteur Lorem. Et anim irure sunt culpa officia et sunt nostrud occaecat voluptate do veniam. Sint proident ipsum id nisi pariatur tempor ex mollit voluptate amet anim nisi. Enim qui fugiat esse irure magna non quis. Consectetur in laboris incididunt culpa excepteur deserunt irure laborum sint.
          <br />Pariatur id dolor sunt exercitation nulla ipsum est adipisicing occaecat sunt sint. Consectetur cillum incididunt sunt laboris officia in eiusmod eu. Consequat consequat laboris voluptate mollit sit consectetur elit aliquip. Pariatur esse dolor fugiat adipisicing exercitation excepteur in cupidatat exercitation tempor elit.
          <br />Enim irure consectetur tempor do mollit culpa mollit fugiat eu anim dolore qui aliquip. Magna dolore qui id ut aliqua in pariatur nisi et anim ut pariatur minim proident. Ut officia ea sunt magna in pariatur officia cupidatat nisi anim nulla non reprehenderit fugiat. Laborum cillum in amet ipsum ullamco aliquip proident quis qui tempor excepteur do proident. In non Lorem elit ex minim nulla est deserunt sunt. Veniam proident magna esse amet deserunt incididunt officia veniam duis in. In ullamco elit pariatur officia ipsum tempor officia esse culpa id dolore id nostrud.
          Fugiat laborum dolor adipisicing duis sint ea duis voluptate. Tempor labore esse incididunt esse exercitation cillum qui eu Lorem tempor eiusmod proident. Officia mollit proident eiusmod nulla nisi aliqua culpa. Aute nulla duis eiusmod reprehenderit. Lorem non qui amet aliquip laboris voluptate ut. Laboris voluptate sint ut sint qui.
          <br />Adipisicing ipsum enim sint pariatur officia nulla nisi velit occaecat esse voluptate dolore est. Elit sit non irure duis dolore laborum cupidatat. Excepteur pariatur sunt officia amet nostrud esse pariatur minim Lorem laborum laboris.
          <br />In nostrud do esse in et adipisicing ex nulla cillum non consectetur sit labore enim. Ex laborum nisi in veniam ullamco sint nisi sunt amet excepteur Lorem. Et anim irure sunt culpa officia et sunt nostrud occaecat voluptate do veniam. Sint proident ipsum id nisi pariatur tempor ex mollit voluptate amet anim nisi. Enim qui fugiat esse irure magna non quis. Consectetur in laboris incididunt culpa excepteur deserunt irure laborum sint.
          <br />Pariatur id dolor sunt exercitation nulla ipsum est adipisicing occaecat sunt sint. Consectetur cillum incididunt sunt laboris officia in eiusmod eu. Consequat consequat laboris voluptate mollit sit consectetur elit aliquip. Pariatur esse dolor fugiat adipisicing exercitation excepteur in cupidatat exercitation tempor elit.
          <br />Enim irure consectetur tempor do mollit culpa mollit fugiat eu anim dolore qui aliquip. Magna dolore qui id ut aliqua in pariatur nisi et anim ut pariatur minim proident. Ut officia ea sunt magna in pariatur officia cupidatat nisi anim nulla non reprehenderit fugiat. Laborum cillum in amet ipsum ullamco aliquip proident quis qui tempor excepteur do proident. In non Lorem elit ex minim nulla est deserunt sunt. Veniam proident magna esse amet deserunt incididunt officia veniam duis in. In ullamco elit pariatur officia ipsum tempor officia esse culpa id dolore id nostrud.
          Fugiat laborum dolor adipisicing duis sint ea duis voluptate. Tempor labore esse incididunt esse exercitation cillum qui eu Lorem tempor eiusmod proident. Officia mollit proident eiusmod nulla nisi aliqua culpa. Aute nulla duis eiusmod reprehenderit. Lorem non qui amet aliquip laboris voluptate ut. Laboris voluptate sint ut sint qui.
          <br />Adipisicing ipsum enim sint pariatur officia nulla nisi velit occaecat esse voluptate dolore est. Elit sit non irure duis dolore laborum cupidatat. Excepteur pariatur sunt officia amet nostrud esse pariatur minim Lorem laborum laboris.
          <br />In nostrud do esse in et adipisicing ex nulla cillum non consectetur sit labore enim. Ex laborum nisi in veniam ullamco sint nisi sunt amet excepteur Lorem. Et anim irure sunt culpa officia et sunt nostrud occaecat voluptate do veniam. Sint proident ipsum id nisi pariatur tempor ex mollit voluptate amet anim nisi. Enim qui fugiat esse irure magna non quis. Consectetur in laboris incididunt culpa excepteur deserunt irure laborum sint.
          <br />Pariatur id dolor sunt exercitation nulla ipsum est adipisicing occaecat sunt sint. Consectetur cillum incididunt sunt laboris officia in eiusmod eu. Consequat consequat laboris voluptate mollit sit consectetur elit aliquip. Pariatur esse dolor fugiat adipisicing exercitation excepteur in cupidatat exercitation tempor elit.
          <br />Enim irure consectetur tempor do mollit culpa mollit fugiat eu anim dolore qui aliquip. Magna dolore qui id ut aliqua in pariatur nisi et anim ut pariatur minim proident. Ut officia ea sunt magna in pariatur officia cupidatat nisi anim nulla non reprehenderit fugiat. Laborum cillum in amet ipsum ullamco aliquip proident quis qui tempor excepteur do proident. In non Lorem elit ex minim nulla est deserunt sunt. Veniam proident magna esse amet deserunt incididunt officia veniam duis in. In ullamco elit pariatur officia ipsum tempor officia esse culpa id dolore id nostrud.
          Fugiat laborum dolor adipisicing duis sint ea duis voluptate. Tempor labore esse incididunt esse exercitation cillum qui eu Lorem tempor eiusmod proident. Officia mollit proident eiusmod nulla nisi aliqua culpa. Aute nulla duis eiusmod reprehenderit. Lorem non qui amet aliquip laboris voluptate ut. Laboris voluptate sint ut sint qui.
          <br />Adipisicing ipsum enim sint pariatur officia nulla nisi velit occaecat esse voluptate dolore est. Elit sit non irure duis dolore laborum cupidatat. Excepteur pariatur sunt officia amet nostrud esse pariatur minim Lorem laborum laboris.
          <br />In nostrud do esse in et adipisicing ex nulla cillum non consectetur sit labore enim. Ex laborum nisi in veniam ullamco sint nisi sunt amet excepteur Lorem. Et anim irure sunt culpa officia et sunt nostrud occaecat voluptate do veniam. Sint proident ipsum id nisi pariatur tempor ex mollit voluptate amet anim nisi. Enim qui fugiat esse irure magna non quis. Consectetur in laboris incididunt culpa excepteur deserunt irure laborum sint.
          <br />Pariatur id dolor sunt exercitation nulla ipsum est adipisicing occaecat sunt sint. Consectetur cillum incididunt sunt laboris officia in eiusmod eu. Consequat consequat laboris voluptate mollit sit consectetur elit aliquip. Pariatur esse dolor fugiat adipisicing exercitation excepteur in cupidatat exercitation tempor elit.
          <br />Enim irure consectetur tempor do mollit culpa mollit fugiat eu anim dolore qui aliquip. Magna dolore qui id ut aliqua in pariatur nisi et anim ut pariatur minim proident. Ut officia ea sunt magna in pariatur officia cupidatat nisi anim nulla non reprehenderit fugiat. Laborum cillum in amet ipsum ullamco aliquip proident quis qui tempor excepteur do proident. In non Lorem elit ex minim nulla est deserunt sunt. Veniam proident magna esse amet deserunt incididunt officia veniam duis in. In ullamco elit pariatur officia ipsum tempor officia esse culpa id dolore id nostrud.
        </p>
        <div class="audio-file" v-for="(audio, index) in files.audioFiles" :key="index">
          <div class="audio-file-btn">
            <img src="../../assets/pause.png" alt />
          </div>
          <div class="audio-file-process">
            <p class="audio-file-title">{{audio.title}}</p>
          </div>
        </div>

        <div class="line"></div>
        <div class="btn-group flex space-between">
          <button class="btn btn-primary ps-64 outlined">Предыдущий</button>
          <button class="btn btn-primary ps-64 btn-dark">Пройти тест</button>
        </div>
      </article>

      <div class="sidebar main-bg">
        <div class="current flex">
          <div class="icon">
            <img src="../../assets/List-blue.png" alt />
          </div>
          <p class="item-title">Содержание указа президента РУз от 18 Апреля 2019 года</p>
        </div>
        <div class="next">
          <p class="next-title">Следующий</p>
          <div>
            <div class="next-item flex">
              <div class="icon">
                <img src="../../assets/List-blue.png" alt />
              </div>
              <p class="item-title">Содержание указа президента РУз от 18 Апреля 2019 года</p>
            </div>
            <div class="next-item flex">
              <div class="icon">
                <img src="../../assets/List-blue.png" alt />
              </div>
              <p class="item-title">Содержание указа президента РУз от 18 Апреля 2019 года</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

这是api.js文件

export var files = {
  audioFiles: [
    {
      id: 1,
      title: "Содержание указа президента РУз от 18 Апреля 2019 года",
      content:
        "http://d.topmusic.uz/new/singles/vol103/Mot_-_Perekrestki_(TopMusic.uz).mp3"
    },
    {
      id: 2,
      title: "2Содержание указа президента РУз от 18 Апреля 2019 года",
      content:
        "http://d.topmusic.uz/new/singles/vol101/Matrang_-_Matrang_(TopMusic.uz).mp3"
    },
    {
      id: 3,
      title: "3Содержание указа президента РУз от 18 Апреля 2019 года",
      content:
        "http://d.topmusic.uz/new/singles/vol104/Jony_-_Alleya_(TopMusic.uz).mp3"
    }
  ]
};

// export const data = {
//   materials: [
//     {
//       id: 1,
//       read: true,
//       article: {
//         title: "Some title",
//         desc: "Some desc",
//         media: [
//           {
//             type: "audio",
//             content: "audio.mp3"
//           },
//           {
//             type: "video",
//             content: "audio.mp4"
//           },
//           {
//             type: "image",
//             content: "image.jpg"
//           }
//         ]
//       },
//       completed: false,
//       tests: [
//         {
//           text: "What is the full form of HTTP?",
//           responses: [
//             { text: "Hyper text transfer package" },
//             { text: "Hyper text transfer protocol", correct: true },
//             { text: "Hyphenation text test program" },
//             { text: "None of the above" }
//           ],
//           completed: false
//         },
//         {
//           text: "HTML document start and end with which tag pairs?",
//           responses: [
//             { text: "HTML", correct: true },
//             { text: "WEB" },
//             { text: "HEAD" },
//             { text: "BODY" }
//           ],
//           completed: false
//         },
//         {
//           text: "Which tag is used to create body text in HTML?",
//           responses: [
//             { text: "HEAD" },
//             { text: "BODY", correct: true },
//             { text: "TITLE" },
//             { text: "TEXT" }
//           ],
//           completed: false
//         },
//         {
//           text: "Outlook Express is _________",
//           responses: [
//             { text: "E-Mail Client", correct: true },
//             { text: "Browser" },
//             {
//               text: "Search Engine"
//             },
//             { text: "None of the above" }
//           ],
//           completed: false
//         },
//         {
//           text: "What is a search engine?",
//           responses: [
//             { text: "A hardware component " },
//             {
//               text: "A machinery engine that search data"
//             },
//             { text: "A web site that searches anything", correct: true },
//             { text: "A program that searches engines" }
//           ],
//           completed: false
//         },
//         {
//           text: "What does the .com domain represents?",
//           responses: [
//             { text: "Network" },
//             { text: "Education" },
//             { text: "Commercial", correct: true },
//             { text: "None of the above" }
//           ],
//           completed: false
//         },
//         {
//           text: "In Satellite based communication, VSAT stands for? ",
//           responses: [
//             { text: " Very Small Aperture Terminal", correct: true },
//             { text: "Varying Size Aperture Terminal " },
//             {
//               text: "Very Small Analog Terminal"
//             },
//             { text: "None of the above" }
//           ],
//           completed: false
//         },
//         {
//           text: "What is the full form of TCP/IP? ",
//           responses: [
//             { text: "Telephone call protocol / international protocol" },
//             {
//               text: "Transmission control protocol / internet protocol",
//               correct: true
//             },
//             { text: "Transport control protocol / internet protocol " },
//             { text: "None of the above" }
//           ],
//           completed: false
//         },
//         {
//           text: "What is the full form of HTML?",
//           responses: [
//             {
//               text: "Hyper text marking language"
//             },
//             { text: "Hyphenation text markup language " },
//             { text: "Hyper text markup language", correct: true },
//             { text: "Hyphenation test marking language" }
//           ],
//           completed: false
//         },
//         {
//           text: '"Yahoo", "Infoseek" and "Lycos" are _________?',
//           responses: [
//             { text: "Browsers" },
//             { text: "Search Engines", correct: true },
//             { text: "News Group" },
//             { text: "None of the above" }
//           ],
//           completed: false
//         }
//       ]
//     }
//   ]
// };

我不明白为什么会这样？

在Test.vue中，我成功导入了测试数据。

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'audioFiles'

0 个答案: