ページネーション時の投稿削除について

Question

前提・実現したいこと

ページネーション機能実装後に、投稿削除機能をつけたい。
※Nuxt.jsで開発しています。

該当のソースコード

<template>
      <!-- 商品一覧 -->
      <div>
        <ul class="list_header">
          <li v-for="(product, index) in displayLists" :key="index">
            <div class="list_title">
              <p>{{ product.shop }}</p>
              <p class="openEdit" @click="openEdit(index)">･･･</p>
            </div>
            <div class="list_product_details">
              <div class="list_price_box">
                <p>価格</p>
              </div>
              <p>{{ product.name }}</p>
              <small>{{ product.quantity }}{{ product.unit }}</small>
              <p>{{ product.price }}円</p>
            </div>

            <div class="list_date">
              <p>{{ product.date }}</p>
              <p>{{ product.user }}</p>
            </div>
          </li>
        </ul>
      </div>

    <!-- ページネーションボタン -->
     <v-content>
      <div class="text-center">
        <v-pagination
          v-model="page"
          :length="getPageLength"
          @input = "pageChange"
        ></v-pagination>
      </div>
    </v-content>
</template>

<script>
export default {
  data: function() {
    return {
      index,
      page: 1
    };
  },
  computed: {
    displayLists() {
      return this.$store.getters.displayLists;
    },
    //ページ数の取得
    getPageLength() {
      return this.$store.getters.getPageLength;
    }
  },
  mounted() {
    // 投稿された商品情報を表示
    this.$store.dispatch('displayLists');
    // 投稿数に対してのページ数を取得
    this.$store.dispatch('getPageLength');
  },
  methods: {
    // ページネーションを発火させる為の関数
    pageChange: function(pageNumber){
      this.$store.dispatch('pageChange', pageNumber);
    },
    // 投稿を削除する関数
    deletePost() {
      this.$store.dispatch('deletePost', this.index);
    },
  }
};
</script>

import Vuex from 'vuex';
const createStore = () => {
  return new Vuex.Store({
    state: function() {
      return {
        products: [
          {user: '太郎',shop: '東京野菜市場',price: 100,name: 'トマト',quantity: 1,unit: '個',date: '2021/04/15 11:30'},
          {user: '花子',shop: '巣鴨野菜市場',price: 50,name: 'なす',quantity: 2,unit: '個',date: '2021/04/05 12:30'},
          {user: '一郎',shop: '新宿野菜市場',price: 300,name: 'りんご',quantity: 3,unit: '個',date: '2021/04/03 13:30'},
          {user: '二郎',shop: '杉並区野菜市場',price: 200,name: 'きゅうり',quantity: 2,unit: '個',date: '2021/04/04 14:30'},
          {user: '三郎',shop: '世田谷区野菜市場',price: 130,name: 'ほうれん草',quantity: 1,unit: '個',date: '2021/04/05 16:30'},
          {user: '三郎',shop: '世田谷区野菜市場',price: 150,name: 'ぶどう',quantity: 1,unit: '個',date: '2021/04/05 16:30'},
          {user: '三郎',shop: '世田谷区野菜市場',price: 110,name: 'キャベツ',quantity: 1,unit: '個',date: '2021/04/05 16:30'},
          {user: '三郎',shop: '世田谷区野菜市場',price: 200,name: 'ぶどう',quantity: 1,unit: '個',date: '2021/04/01 10:30'},
          {user: '四郎',shop: '世田谷区野菜市場',price: 110,name: 'オレンジ',quantity: 1,unit: '個',date: '2021/04/01 11:03'},
          {user: '一郎',shop: '新宿野菜市場',price: 200,name: 'りんご',quantity: 2,unit: '個',date: '2021/04/08 13:30'},
          {user: '花子',shop: '巣鴨野菜市場',price: 100,name: 'なす',quantity: 3,unit: '個',date: '2021/04/02 12:30'},
        ],
        displayLists: [],
        length: 0,
        pageSize: 10,
        filterWord: { name: 'すべて' },      };
    },
    getters: {
      displayLists: function(state) {
        if (state.filterWord.name === 'すべて') {
          return state.displayLists;
        } else {
          const result = state.displayLists.filter(function(value) {
            return value.name === state.filterWord.name;
          });
          return result;
        }
      },
      getPageLength: function(state) {
        return state.length;
      }
    },
    mutations: {
      deletePost(state, index) {
        state.displayLists.splice(index, 1);
        state.products.splice(index, 1);
      },
      displayLists(state) {
        state.displayLists = state.products.slice(0, state.pageSize);
      },
      pageChange(state, pageNumber) {
        state.displayLists = state.products.slice(
          state.pageSize * (pageNumber - 1),
          state.pageSize * pageNumber
        );
      },
      getPageLength(state) {
        state.length = Math.ceil(state.products.length / state.pageSize);
      }
    },
    actions: {
      // 配列productsに格納されているデータの中から10件ずつ表示させる為の関数
      displayLists({ commit }) {
        commit('displayLists');
      },
      //  ページネーションさせる関数
      pageChange({ commit }, pageNumber) {
        commit('pageChange', pageNumber);
      },
      //  ページネーションするページ数を取得
      getPageLength({ commit }) {
        commit('getPageLength');
      },
      // 商品情報削除処理
      deletePost({ commit }, index) { //クリックされた要素のインデックス番号を取得し引数として渡す
        commit('deletePost', index);
      },
    }
  });
};
export default createStore;

発生している問題・エラーメッセージ

配列productsの中に入っているデータを10件ずつ取り出し、空の配列displayListsに格納後、v-forで表示するようにしています。
不要な投稿を削除しようとした時に、products、displayListsそれぞれの配列から該当する配列番号のデータを削除しようとした時にそれぞれ違うデータが削除されるようになってしまいました。

原因はページネーションで10件ずつの表示にしている為、仮にproductsのデータが20件あったとしてもindexが0〜9までしか発行されないことが原因だと思われます。

既存のデータを別の配列へ格納させること自体が間違っているのでしょうか？

いい方法があれば教えていただけると幸いです????‍♂️

Answer 1

Vueで配列から削除処理するときはarray.spliceじゃなくてthis.$delete(array,idx)を使いましょう。連想配列でspliceを使うと、基準キーの値がどんどんずれていってしまいますよ。

Comments

[F_Yohei]

ありがとうございます。
配列から削除はできるのですが、配列productsと配列displayListsから同じ投稿が削除されないことに関しては変わらずでした。。。

[FKM]

displayListsがページネーション用にも区切ってしまっているためですね。
なので、
１：productsからデータを削除した
２：削除されたproductsから新たにdisplayListsを生成

この動きの方が自然です。