Nuxt.jsで要素を追加する方法

Question

前提・実現したいこと

Nuxt.jsでToDoリストのようなものを作っています。
入力フォームがあり、ボタンを押すと入力した内容がテキストとして下に追加されるような機能をイメージしていますが、Nuxt.jsでの実装の仕方がわからず困っています。
Nuxt.jsに詳しい方いましたら、どなたか教えていただけませんでしょうか。

jQueryのappendメソッドのような動きをNuxt.jsの書き方で実装できればと考えています。

参考サイト
jQueryを利用したDOM操作 要素の追加メソッドまとめ

試したこと

Nuxt.jsとVue.jsのドキュメントを一通り確認しました。

参考サイト
Nuxt.jsのガイド
Vue.jsのガイド

追記：ソースコードを追記しました。

<template>
  <input
    id="work"
    type="text"
    class="form-control work"
    placeholder="やったこと"
  />
</template>

<script>

</script>

<style scoped lang="scss">

</style>

申し訳ありませんが、Vue、Nuxt共に初学者ですので、正直なところこれが精一杯でして、この後どうしたら良いか？という部分が全くわからない状況です。
そもそもフレームワークに要素を追加するメソッドが用意されているのか、それとも別の概念を勉強してロジックを組むべきなのかも分かっていないのが現状です。

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

Nuxt.js v2.8.1

Comments

[退会済みユーザー]

丸投げの作業依頼は非推奨質問です。

[onoyuu]

いいえ、課題や仕事を無償でやってもらう意図はありません。
フレームワークの使い方について質問しているのです。

したがって、作業依頼には該当しません。

参考リンク
https://teratail.com/help/question-tips

[退会済みユーザー]

まず、できたところまで具体的にコードを示して下さい。
その上で詰まった点を質問して具体的内容となります。

[退会済みユーザー]

要件だけを書いて、そのコードを教えて下さいというのは丸投げです。
そして貴方はフレームワークの使い方でなく要件の実装を丸投げしています。

[onoyuu]

回答の意図を理解しました。
至らない部分があり、申し訳ございません。

ご指摘いただき、ありがとうございます。
ひとまずコードを追記したいと思うので、しばらく時間がかかりますが、追記後また回答いただけましたら、幸いに思います。

[onoyuu]

dyoshikawa様

質問にソースコードの追記をしましたので、ご確認いただけましたら幸いです。
これが今の精一杯な部分もあるのですが、質問内容の訂正、追記要請等ありましたらおっしゃっていただいて大丈夫です。

[退会済みユーザー]

それが今の精一杯であれば学習のステップを大幅に飛ばしていることが原因なのでそれについて回答しました。

[onoyuu]

回答いただき、ありがとうございます。
示していただいた学習指針を参考に勉強を進めていこうと思います。

Answer 1

コードを見ましたがやはり丸投げの域を出ないようです。
また、まだ「自分でTODOアプリを作ってみる」という段階ではないと思います。
学習指針だけ示します。

1. そもそもJSの知識が浅い場合

https://ja.javascript.info/

1. Vue

NuxtはVueをベースにしたFWなのでまずはVueの学習をして下さい。
https://jp.vuejs.org/v2/guide/
これを終えればTODOリストのサンプルのコードも理解できるようになっているでしょう。
必要に応じて Vuex, VueRouter についても学習して下さい。

1. Nuxt

Vueを学習すればNuxtで躓く点はほとんどないと思います。
適宜ドキュメントをつまみ食いすれば良いでしょう。

いずれも読むだけでなく 実際にサンプルコードを書いて動作させながら 学習して下さい。
そして現代JSやVueドキュメントのチュートリアルに詰まる所があればその質問を建てるようにして下さい。

上記を理解していればこのような質問にはならないはずなので頑張って下さい。

Comments

[onoyuu]

回答いただき、ありがとうございました。
実際にサンプルコードを書いて動作させながら学習することが大切なのですね。

初めは手厳しい方だと思いましたが、夜分遅くでも早速回答をくださったこと、具体的な学習指針を示してくださったことに感謝しています。
ご丁寧にありがとうございました。

回答内容を受け止め、勉学に励んでいきます。

[退会済みユーザー]

何か詰めているように見えたらすみません。
基本を理解していないと同じような質問を連発してしまうことになるので、ぜひ頑張ってください。

[onoyuu]

いえいえ、良い気づきが得られたことに感謝しています。
まずは基本をしっかり理解するところから始めたいと思います。