

# 環境

windows10(64)  
"vue": "^2.6.10",  
"vuetify": "^2.1.0",  
"vue-cli":"3.11.0",  
"node":"v11.13.0"  
プログラミング歴 ４か月ほど

#  苦戦しているところ

vuetify＋vue-cliでtodoアプリ(講義さぼり回数カウントアプリ）を作っています。[URL](https://vuejs-
http-e3587.firebaseapp.com/)  
授業名（タスク）を２つ以上登録して状態でメモ（フォーム）を入力し、ページロードすると後から入力した内容に全て書き換わってしまいます。

➀上の経済学にメモ（ええええ）を入力して  
[![画像の説明をここに入力](https://i.stack.imgur.com/c0r2n.png)](https://i.stack.imgur.com/c0r2n.png)  
➁ページロードすると・・・・  
[![画像の説明をここに入力](https://i.stack.imgur.com/xoy6S.png)](https://i.stack.imgur.com/xoy6S.png)

➂下のタスク（スポーツ科学）にもそのメモの内容（ええええ）が反映してしまう。  
[![画像の説明をここに入力](https://i.stack.imgur.com/xLWHV.png)](https://i.stack.imgur.com/xLWHV.png)

# ソースコード

Count.vue(必要な部分のみ)

[code]

     @@ -11,7 +11,7 @@
              <v-card card_id max-width="344" class="mx-auto">
                <v-card-title>{{todo.name}}</v-card-title>
                <v-card-text>
    +             <Field />
                </v-card-text>
                <v-card-actions>
                  <v-btn @click="increment(todo)" color="primary">さぼり回数</v-btn>
                  <span>{{ todo.count }}</span>
                  <v-btn @click="decrement(todo)" color="error">間違い（－）</v-btn>
                  <v-btn @click="deleteItem(index)">削除</v-btn>
                </v-card-actions>
              </v-card>
            </div>
          </v-container>
        </v-content>
      </v-app>
    </template>
    
    <script>
    + import Field from "./Field";
    
    export default {
      data() {
        return {
          count: 0,
          name: "",
          todos: []
        };
      },
    +  components: {
    +    Field
    +  },
      mounted() {
        this.todos = JSON.parse(localStorage.getItem("todos")) || [];
      },
      methods: {
        addTodo() {
    
[/code]

[Count.vueの全コード](https://github.com/masal9pse/courageTodo/blob/develop2/src/components/Count.vue)

Field.vue ↓

[code]

    <template>
      <v-text-field label="メモ" v-model="memo"></v-text-field>
    </template>
    
    <script>
    export default {
      data() {
        return {
          memo: ""
        };
      },
      mounted() {
        if (localStorage.memo) this.memo = localStorage.memo;
      },
      watch: {
        memo(newMemo) {
          localStorage.memo = newMemo;
        }
      }
    };
    </script>
    
[/code]

この問題を解決するにはどうすれば良いでしょうか？またこの問題を解決するにあたって必要な知識がありますでしょうか？あるいはこの問題は解決できないのしょうか？  
拙い質問で申し訳ありませんが回答お願いします。


CC BY-SA 4.0
2019-11-09T11:54:29.290
60373
2019-11-09T19:40:21.467
2020-06-17T08:14:45.997
-1
36424
question
javascript html5 vue.js windows-10
vue-cli　再読み込みすると入力した内容が全てのフォームに反映してしまう。


まず疑問に思ったのが、Field.vueに切り分けたところなのですが、それは人それぞれとして置いて、vuexで管理されてはどうでしょうか？その際は、dataではなくstateとして各値をローカルストレージ、もしくはDBに保存することになると思いますが。


CC BY-SA 4.0
2019-11-09T19:40:21.467
60377
2019-11-09T19:40:21.467
36023
60373
answer