Помогите решить ошибку в приложении Vue

Question

Проблема в том что ошибка в консоле такая: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'topic') at eval (eval at compileToFunction (vue@next:1), :56:71) at renderList (vue@next:7503) at Proxy.render (eval at compileToFunction (vue@next:1), :37:65) at renderComponentRoot (vue@next:2261) at ReactiveEffect.componentUpdateFn [as fn] (vue@next:6044) at ReactiveEffect.run (vue@next:568) at callWithErrorHandling (vue@next:8409) at flushJobs (vue@next:8634) С другим json все работает нормально, а тут такая ошибка, помогите решить

// start vue app
const App = {
  data() {
    return {
      title: "Card Editor",
      originalArr: [], // originalArr - original data
      copiedArr: [], // copiedArr - copied data from the original array
    }
  },
  mounted() {},
  methods: {
    // push to the original array
    async originalPush() {
      let file = document.querySelector("#file").files[0]
      let data

      data = await this.loadFile(file)
      let test = JSON.parse(data)
      this.originalArr.push(...test.cards)

      this.copyOriginal()
    },
    // the method that loads a file
    loadFile(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader()

        reader.onload = function (event) {
          let data = event.target.result
          resolve(data)
        }

        reader.readAsText(file)
      })
    },
    // copyOriginal method:
    copyOriginal() {
      this.copiedArr = JSON.parse(JSON.stringify(this.originalArr))
    },
    // change item id
    changeItemId(item, e) {
      item.id = Number(e.target.value)
      e.target.value = ""
    },
    // change item en topic
    changeItemEnTopic(item, e) {
      item.languages.en.topic = e.target.value
      e.target.value = ""
    },
    // change en words
    changeEnWords(item, e) {
      let target = e.target.value
      item.languages.en.words = target.split(",")
      e.target.value = ""
    },
    // change item uk topic
    changeItemUkTopic(item, e) {
      item.languages.uk.topic = e.target.value
      e.target.value = ""
    },
    // change en words
    changeUkWords(item, e) {
      let target = e.target.value
      item.languages.uk.words = target.split(",")
      e.target.value = ""
    },
    // download function
    download(fileName, content) {
      let element = document.createElement("a")
      element.style.display = "none"

      element.setAttribute(
        "href",
        "data:text/plain;charset=utf-8," + encodeURIComponent(content)
      )

      element.setAttribute("download", fileName)
      document.body.appendChild(element)
      element.click()
      document.body.removeChild(element)
    },
    // Here, when the user clicks the download button, start download
    downloadFile() {
      // let content = JSON.stringify(this.copied)
      let content = JSON.stringify(this.copiedArr)
      let fileName = "test.json"
      this.download(fileName, content)
    },
  },
}

Vue.createApp(App).mount("#container")

<!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>Card Review</title>
    <!-- css -->
    <link rel="stylesheet" href="./assets/css/style.css" />
  </head>
  <body>
    <!-- container -->
    <div id="container" class="container">
      <h1 class="title">{{ title }}</h1>

      <input type="file" id="file" />
      <button id="load" @click="originalPush">Load JSON File</button>
      <button id="download" @click="downloadFile">Download JSON File</button>
      <!-- card__inner -->
      <div class="card__inner">
        <!-- card__item -->
        <div
          class="card__item"
          v-for="(item, idx) in originalArr"
          :key="item.id"
        >
          <!-- card front -->
          <div class="card__front">
            <div class="card__header">
              <span>
                {{ item.id}}
                <div class="div">
                  <input
                    type="text"
                    class="input"
                    @keyup.enter="changeItemId(item, $event)"
                  />
                </div>
              </span>
              <span>
                {{ item.languages.en.topic }}
                <!-- <div class="div">
                  <input
                    type="text"
                    class="input"
                    @keyup.enter="changeItemEnTopic(item, $event)"
                  />
                </div> -->
              </span>
            </div>

            <!-- <div class="card__body">
              <div class="card__content">
                <span
                  class="card__word"
                  v-for="word in item.languages.en.words"
                >
                  {{ word }}
                </span>
              </div>
              <input type="text" @keyup.enter="changeEnWords(item, $event)" />
            </div> -->
          </div>
          <!-- card__front -->
          <!-- card back -->
          <!-- <div class="card__back">
            <div class="card__header back">
              <span> {{ item.id }}</span>
              <span>
                {{ item.languages.uk.topic}}
                <div class="div">
                  <input
                    type="text"
                    class="input"
                    @keyup.enter="changeItemUkTopic(item, $event)"
                  />
                </div>
              </span>
            </div>

            <div class="card__body">
              <div class="card__content">
                <span
                  class="card__word"
                  v-for="word in item.languages.uk.words"
                >
                  {{ word }}
                </span>
              </div>
              <input type="text" @keyup.enter="changeUkWords(item, $event)" />
            </div>
          </div> -->
          <!-- /back -->
        </div>
        <!-- /card__item -->
      </div>
      <!-- /card__inner -->
    </div>
    <!-- /container -->

    <!-- vue3 cdn -->
    <script src="https://unpkg.com/vue@next"></script>
    <!-- javascript -->
    <script src="./assets/js/app.js"></script>
  </body>
</html>

ТУТ САМ JSON FILE:

{
"cards": [
    {
      "id": 399,
      "languages": {
        "en": {
          "topic": "Economy",
          "words": ["commerce", "SALE", "commercial", "a commercial"]
        },
        "uk": {
          "topic": "Економіка",
          "words": ["комерція", "торговельний, комерційний", "реклама"]
        }
      },
      "looks_fine": false
    },
    {
      "id": 67,
      "languages": {
        "en": {
          "topic": "Appearance",
          "words": [
            "a dot",
            "a dotted line",
            "Her dress was white with black",
            "dots"
          ]
        },
        "uk": {
          "topic": "Зовнішній вигляд.",
          "words": [
            "крапка, цятка",
            "пунктирна лінія",
            "У неї була біла сукня в чорну",
            "крапочку"
          ]
        }
      },
      "looks_fine": true
    },
}

Answer 1

У вас ошибки в JSON, вот правильный

{
"cards": [
    {
      "id": 399,
      "languages": {
        "en": {
          "topic": "Economy",
          "words": ["commerce", "SALE", "commercial", "a commercial"]
        },
        "uk": {
          "topic": "Економіка",
          "words": ["комерція", "торговельний, комерційний", "реклама"]
        }
      },
      "looks_fine": false
    },
    {
      "id": 67,
      "languages": {
        "en": {
          "topic": "Appearance",
          "words": [
            "a dot",
            "a dotted line",
            "Her dress was white with black",
            "dots"
          ]
        },
        "uk": {
          "topic": "Зовнішній вигляд.",
          "words": [
            "крапка, цятка",
            "пунктирна лінія",
            "У неї була біла сукня в чорну",
            "крапочку"
          ]
        }
      },
      "looks_fine": true
    }]
}

БЛОГ НА HUSL

Помогите решить ошибку в приложении Vue

Ответы (1 шт):