I am trying to make a to-do list app where the list is filled with tasks from an API. I also want to be able to add tasks and have them saved when I refresh. Yet I cann't seem to merge the two arrays, the API and the user inputted tasks. For now, I'd like to save them to my local storage, however, it is not working and I cannot figure it out. Also, I am unable to figure out how to do this in my created function. Could anyone point me to any resources or can immediately see what is wrong? Any help is greatly appreciated!

var app = new Vue({
  el: '#app',
  data () {
    return {
      items: [{
        title: "",
        completed: false,
        }],
        title: '',
        show: 'all',
    }
  },
  mounted () {
    if(localStorage.getItem('items')) {
      try {
        this.items = JSON.parse(localStorage.getItem('items'));
      } catch(e) {
        localStorage.removeItem('items');
      }
    }
  },
  created: function () {
    axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then(response => this.items = response.data)
    items.concat(items)
  },
  computed: {
    activeItems() {
      this.saveItems;
      return this.items.filter(item => {
        return !item.completed;
      });
    },
    filteredItems() {
      if (this.show === 'active')
        return this.items.filter(item => {
          return !item.completed;
        });
      if (this.show === 'completed')
        return this.items.filter(item => {
          return item.completed;
        });
      return this.items.reverse();
    },
    
  },
  methods: {
    addItem() {
      this.items.push({
        title: this.title,
        completed: false
      });
      this.title = '';
      this.saveItems();
    },
    deleteItem(item) {
      var index = this.items.indexOf(item);
      if (index > -1)
        this.items.splice(index, 1);
      this.saveItems();
    },
    saveItems() {
      const parsed = JSON.stringify(this.item);
      localStorage.setItem('items', parsed);
    },
    showActive() {
      this.show = 'active';
    },
    showAll() {
      this.show = 'all';
    },
    showCompleted() {
      this.show = 'completed';
    },
    deleteCompleted() {
      this.items = this.items.filter(item => {
        return !item.completed;
      });
    },
  }
});

CodePudding user response：

please have a look at this article - Creating a Simple To-do App With Vue: List Rendering, And Class Binding

In your case you should use either created or mounted function. No need to use both. If you use both, you should know the correct order in which they are called. However, there are promises and async code. So, I recommend using only one.

You can do something like below

mounted () {
    axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then(response => {
         const apiItems = response.data;
         if(localStorage.getItem('items')) {
           try {
             this.items = apiItems.concat(JSON.parse(localStorage.getItem('items')));
           } catch(e) {
             localStorage.removeItem('items');
             this.items = apiItems;
           }
         }
       })
  },

CodePudding user response：

Step 1: HTML template

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item.title }}</li>
  </ul>
  <div>
    <input type="text" v-model="title" />
    <button type="button" @click.prevent="addItem">Add</button>
  </div>
</div>

Step 2: Update your add button action event

addItem() {
  const data = {
    title: this.title,
    completed: false,
  };
  this.items.push(data);
  this.saveItems(data);
  this.clearForm();
},

Step 3: Update your saveItems method

Before adding to localStorage you have to consider below steps,

• Have to check already have localStorage data

• If already have localStorage data then you have to push the new values to the old array

• If no localStorage data then you have to save the new values in an array format

  saveItems(item) {
    var localSaveItems = [];
    var getLocalItems = localStorage.getItem("items");
    if (getLocalItems) {
        getLocalItems = JSON.parse(getLocalItems);
        localSaveItems = [...localSaveItems, ...getLocalItems];
        localSaveItems.push(item);
        localStorage.setItem("items", JSON.stringify(localSaveItems));
    } else {
        localSaveItems.push(item);
        localStorage.setItem("items", JSON.stringify(localSaveItems));
    }
  },
  clearForm() {
     this.title = "";
  },
  

Step 4: Update the create function

created: function () {
  axios.get("https://jsonplaceholder.typicode.com/todos").then((response) => {
    this.items = response.data;
    if (localStorage.getItem("items")) {
      try {
        this.localStorageItems = JSON.parse(localStorage.getItem("items"));
        this.items = [...this.items, ...this.localStorageItems];
      } catch (e) {
        localStorage.removeItem("items");
      }
    }
  });
},

Once loaded the REST API data you have to check already having localStorage data or not. If you have localStorage data then you have join two arrays.

Using Spread operation you can join two arrays like below,

this.items = [...this.items, ...this.localStorageItems];

DEMO