Vue.jsの入力フォームの出力結果を次々に追加したい

Question

v-modelを使用した。入力フォームに入力した値を出力してその下に表示する簡単なプログラムです。
現状では入力したその値が期待するように表示させることができたのですが、次の値を入力するとその前の出力した内容が消えてしまいます。

そのため繰り返し表示する必要があるイコールv-forの活用だと思いました。
ただ多くの情報では他の複雑に色々な処理が書かれているサンプルばかりでわたしが期待するような処理だけが載せてある記事にたどり着くことができませんでした。

そのあとも調べてみたのですが手詰まりで...そもそもこれもあっているのかわからない状態です。
ぜひご教授頂けましたらよろしくお願いします。

######現状
「おはよう」と入力
「こんにちは」と入力
↓
「おはよう」が消えてしまう

######期待する結果
「おはよう」と入力
「こんにちは」と入力

おはよう
こんにちは

と次々に表示されるテキストが追加されるようにしたい

<template>
  <div id="app">
    <h1> ToDoアプリ</h1>
    <form @submit.prevent="addItem">
      <input type="text" v-model.lazy="textInput">
      <input type="submit" value="追加">
    </form>    
    <p v-for="textInput in textInputs" :key="textInput">
      {{ textInput }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textInput: '',
    }
  },
  methods: {
    addItem: function(){
      this.textInputs.push(this.textInput);
      this.textInput = '';
    }
  }
};
</script>

Comments

[shiketa]

textInput`s`は、どこに定義してあるのですか?

[_chii]

正しいかわからないのですが、わたしなりに考えてた結果を追記致しました。

[k_a]

やりたいこともわかりますしやり方もわかるのですが、回答の前に_chiiさんはv-forの仕組みを理解していますでしょうか？

また、追記いただいたコードはどういう意図でこの様な定義にしたのでしょうか？
```
textInputs: {
textInput: '',
}
```
v-forの仕組みとやりたいことからすると配列になるということはわかりますか？

また、「次の値」と書いてありますが、「今」と「次」はどう分けるのでしょうか？
・「おはよう」と入力
・「おはよう」を消す
・「こんにちは」と入力
と言った感じでしょうか？これだと「こんにちは」しか表示されないのは当たり前です。
入力を確定する様なボタンなどが必要だと思います。

[_chii]

ありがとうございます！頂いたアドバイスをもとに大幅にコードの修正を行いました。
こちらで見ていただけないでしょうか。

[k_a]

ほとんど完成しています。
後はdataに`textInputs: []`も定義してあげてください。

[_chii]

できました！ありがとうございます????

Answer 1

修正依頼に書かれた内容をもとに修正