javascriptのeval('item'+1)のようなことをして if,elseのコードをなくしたい

Question

前提・実現したいこと

Vueを使ってDBから取得した値を元にdata()内の変数item1～4に値を設定したいのですが1～4の可変する変数名をもっと効率良くする方法がありますか？
javascriptのeval('item'+1)のようなことをして if,elseのコードをなくしたいです。
vueをはじめたばかりです。お願いします。

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

エラーメッセージ

該当のソースコード

export default Vue.extend({
name: "Swap",
  components: {
    draggable
  },
  data() {
    return {
      item1: [],
      item2: [],
      item3: [],
      item4: [],
      posts: []
    }
  },
  methods: {
    getDatas(){
　　  axios.get('http://localhost/sample.php').then((response) => {
        this.posts = response.data;
        this.posts.forEach( post=> {
          if(post.id == 1){
            this.item1.push(
              {id: post.id, name: post.name }
            )
          }
          else if(post.id == 2){
            this.item2.push(
              {id: post.id, name: post.name }
            )
          }
          else if(post.id == 3){
            this.item3.push(
              {id: post.id, name: post.name }
            )
          }
        }).catch((error) => {
          console.log(error);
        });
  }
})

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[y_waiwai]

配列にするのではいけないんでしょうか

[xhiro]

ありがとうございます。
3次元配列？に変えてやってみたのですが、
vuedraggableを使ってまして、配列は現状のままでないと、ドラッグアンドドロップしたときの動作がおかしくなります。

Answer 1

this.item1はthis['item1']でアクセスできると思いますよ。

Comments

[xhiro]

ありがとうございました。無事、コンパクトなコードが出来ました。