Ошибка при сохранении в локальном хранилище для Vue.js

Question

В моем приложении Vue JS я пытаюсь сохранить данные, которые я получаю из остальных API, в компонент списка, но получаю следующую ошибку:

Error in mounted hook: "SyntaxError: Unexpected token u in JSON at position 0"

Я не вижу, что может бытьвызывая это?

Компонент:

<template>
  <div class="mb-5 mt-5 container">

    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active">
        My List
        <span class="badge badge-light">{{List.length}}</span>
      </a>
      <a
        href="#"
        class="list-group-item list-group-item-action"
        v-for="(result, index) in List"
        :key="index"
      >
        {{result.collectionName}}
        <br>
        <b>{{result.artistName}}</b>
        <br>
        <div class="row">
          <div class="col-md-6">
            <button
              class="btn btn-success btn-sm btn-block"
              v-on:click="removeElement(index)"
            >Remove</button>
          </div>
          <div class="col-md-6">
            <button
              class="btn btn-info btn-sm btn-block"
              @click="toiTunesAlbum(result)"
            >View on iTunes</button>
          </div>
        </div>
      </a>
    </div>

    <button class="btn btn-info mt-5 btn-lg btn-block" @click="saveList()">Save</button>
  </div>
</template>

<script>
export default {
  name: "List",
  props: ["List"],

  mounted() {
    if(localStorage.result) this.result = JSON.parse(this.result);
  },

  methods: {
      saveList() {
      localStorage.result = this.result;
      localStorage.setItem('result', JSON.stringify(this.result));   
      /* eslint-disable no-console */
      console.log(this.result + 'List Saved');
      /* eslint-disable no-console */
    },

    removeElement: function(index) {
      this.List.splice(index, 1);
    },

    resizeArtworkUrl(result) {
      return result.artworkUrl100.replace("100x100", "160x160");
    },
    toiTunesAlbum(result) {
      window.open(result.collectionViewUrl, "_blank");
    }
  }
};
</script>

<style scoped>
.album-cover {
  width: 100%;
  height: auto;
  background-color: aqua;
}

.album-container {
  height: 350px;
}
</style>

Любые идеи о том, как сохранить в локальном хранилище остальные API-результаты, были бы великолепными.Должен ли я использовать массив списка или результат?

Answer 1

Я думаю, что ваша проблема в том, что вы инициализируете this.result, только если localStorage.result имеет значение.Если localStorage.result не имеет значения при первом вызове saveList, this.result все еще не определен.Попробуйте установить значение по умолчанию или пропустите попытку сохранения, если значение все еще не определено.Я также не уверен в связи между this.List и this.result, так как List кажется списком результатов?