How to get rid of duplicating/copying elements in lists?

Question

JavaScript

I am writing a light clone of Trello without authorization... The situation is this, if you create only one list, then there are no problems as such: create a list -> set a name -> create list elements, but... but on creating the second and n-th lists, I can enter a new name, but all elements will go to all lists ... how to make sure that list elements are not duplicated.



Board field MyBoard.vue:

<template>
  <div>
    <div class="wrapper">
      <div class="row">
        <h1>{{board.title}}</h1>
        <div class="list" v-for="list in lists" :key="list.idList">
          <div class="list__title">
            <h3>{{list.titleList}}</h3>
          </div>
          <div class="list__card" v-for="item in items" :key="item.idItemList">
            <span class="list__item">{{item.itemList}}</span>
            <a class="btn-floating btn-tiny btn-check" tag="button">
              <i class="material-icons">check</i>
            </a>
          </div>
          <createItemList />
        </div>
        <createList />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    board() {
      return this.$store.getters.taskById(+this.$route.params.id);
    },
    lists() {
      return this.$store.getters.lists;
    },
    items() {
      return this.$store.getters.items;
    },

  },

  components: {
    createList: () => import("../components/createList"),
    createItemList: () => import("../components/createItemList")
  },
  methods: {

  }
};
</script>

List creation component and its name CreateList.vue:

<template>
  <div>
    <div class="row">
      <div class="new-list" v-show="isCreating">
        <div class="list__title input-field">
          <input
            type="text"
            required
            id="list-title"
            class="none validate"
            tag="button"
            autofocus
            v-model="titleList"
            v-on:keyup.enter="createList"
          />
          <label for="list-title">Enter Title List</label>
        </div>

        <a class="btn-floating transparent btn-close" tag="button" @click="closeList">
          <i class="material-icons">close</i>
        </a>
      </div>
      <div class="create-list z-depth-2" v-show="!isCreating">
        <p>Create list</p>
        <a
          class="btn-floating btn-large waves-effect waves-light deep-purple lighten-2 pulse"
          tag="button"
          @click="addList"
          v-on:keyup.enter="addList"
        >
          <i class="material-icons">add</i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    isCreating: false,
    titleList: "",
    idList: ""
  }),
  methods: {
    addList() {
      this.isCreating = true;
    },
    closeList() {
      this.isCreating = false;
    },
    createList() {
      if (this.titleList == "") {
        return false;
      }
      const list = {
        idList: Date.now(),
        titleList: this.titleList
      };
      this.$store.dispatch("addList", list);
      this.titleList =  "";
      this.isCreating = false;
      console.log(list.titleList);
    }
  }
};
</script>

Component for creating list items CreateItemList.vue:

<template>
  <div>
    <div class="add-item">
      <div class="textarea-item input-field" v-show="isAdding">
        <input
          type="text"
          class="validate"
          id="list-item"
          v-model="itemList"
          v-on:keyup.enter="createItemList"
          autofocus
        />
        <label for="list-item">Enter Item List</label>
      </div>
      <a class="waves-effect waves-light btn" v-show="!isAdding" @click="addCard">
        <i class="material-icons right">add</i>Add Card
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    isAdding: false,
    itemList: "",
    idItemList:""
  }),
  methods: {
    addCard() {
      this.isAdding = true;
    },
    createItemList() {
       if (this.itemList == "") {
        return false;
      }
      const item = {
        idItemList: Date.now(),
        itemList: this.itemList
      };
     
      
      this.$store.dispatch("createItemList", item);
      this.itemList = "";
      this.isAdding = false;
      console.log(item.idItemList);
    }
  },
    destroyed() {
    //метод для утечки памяти. Он вызовется при уничтожении страницы. Данные методы поступают от materialize
    // уничтожаем плагин и убираем его из HTML и приложении будет более оптимизировано
    if (this.itemList && this.itemList.destroy) {
      this.itemList.destroy();
    }
  }
};
</script>

And actually vuex store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    boards: JSON.parse(localStorage.getItem('boards') || '[]'),
    items: [],
    lists: []
    // items: JSON.parse(localStorage.getItem('items') || '[]')
    // lists: JSON.parse(localStorage.getItem('lists') || '[]')
  },
  mutations: {
    addBoard(state, board) {
      state.boards.push(board)
      localStorage.setItem('boards', JSON.stringify(state.boards))
    },
    addList(state, list) {
      state.lists.push(list)
      // localStorage.setItem('lists', JSON.stringify(state.lists))
    },
    createItemList(state, item) {
      state.items.push(item)
      // localStorage.setItem('items', JSON.stringify(state.items))
    }
  },
  actions: {
    addBoard({commit}, board) {
      commit('addBoard', board)
    },
    addList({commit}, list) {
      commit('addList', list)
    },
    createItemList({commit}, item) {
      commit('createItemList', item)
    }
  },
  getters: {
    boards: s => s.boards,
    taskById: s => id => s.boards.find(t => t.id === id),
    lists: d => d.lists,
    items: a => a.items
  },
  modules: {
  }
})

One person already answered me, but I could not implement what he said

Judging by the template, you have two independent arrays, and when you pass inside one, you generate all the elements of the second each time.
Make a function that returns from items only what the current item from lists is about, since you think they are dependent on each other. Then use it like this:

<div class="list__card" v-for="item in getItems(list)" :key="item.idItemList">

And here we have already discussed such a topic, perhaps this is it .