Vue.jsで連想配列の要素を削除orある条件の場合のみ追加

Question

前提・実現したいこと

以下のような形の連想配列をdataとして持っていて、ある条件の時に1行追加(削除)したいと考えています。

{
  'aaa': xxx1, 'bbb': yyy1,
  'aaa': xxx2, 'bbb': yyy2,
  'aaa': xxx3, 'bbb': yyy3,
  // ある条件の時だけ、以下が配列に入る。
  'aaa': xxx4, 'bbb': yyy4
}

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

うまく追加(削除)ができずにいます。今は、削除するようにしていますがこれでやるとうまくいってもundefinedで要素が残ってしまっているからなのか
TypeError: Cannot read property 'line' of undefined
が出てしまっている状況です。

該当のソースコード

・・・

<script>
export default {
  data () {
    return {
      listLine: [
        {'aaa': xxx1, 'bbb': yyy1},
        {'aaa': xxx2, 'bbb': yyy2},
        {'aaa': xxx3, 'bbb': yyy3},
        {'aaa': xxx4, 'bbb': yyy4}
      ]
    }
  },
  computed: {
    list () {
      const list = this.listLine
      const keys = Object.keys(list)
      if (ccc === 'xxxx') {
        delete list[keys[keys.length - 1]
      }
      return list
    }
  }
}
</script>
・・・

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

Nuxt 2.0.0

Answer 1

オブジェクトのキーを削除したいのか配列を削除したいのかがわかりません。
配列を削除するならvueならspliceで削除しましょう。spliceの使い方は調べましょう。

    list () {
      const list = this.listLine
      const keys = Object.keys(list)
      // cccはどこから？
      if (ccc === 'xxxx') {
        delete list[keys[keys.length - 1]
      }
      return list
    }

Comments

[chaso_0307]

削除したいのは配列1行そのものですね

[sousuke]

であればdeleteは間違いです。vueのdataの配列を削除するときはspliceを使います。
質問からはそれますが、そもそもthis.listLineから削除した時点でlistLine自体が変化し
DOMに反映されますのでcomputedでlistを返す必要はないように思えます。
こういう場合はmethodで削除ロジックだけ入れ込むものだと思うのですが…