If you reload the vue-cli, the input will be reflected in all the forms.

Asked 2 years ago, Updated 2 years ago, 113 views

Windows 10(64)
"vue": "^2.6.10",
"vuetify": "^2.1.0",
"vue-cli": "3.11.0",
"node":"v11.13.0"
About 4 months of programming experience

I am creating a todo app with vuetify+vue-cli.URL
After registering more than one class name (task), fill in the memo (form), and when you load the page, everything will be rewritten to what you entered later.

上 Enter a note in the economics above
Enter a description of the image here
➁When I load the page...
Enter a description of the image here

下 The contents of the memo are reflected in the task (sports science) below.
Enter a description of the image here

Count.vue

@@-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 of >
            </v-card-text>
            <v-card-actions>
              <v-btn@click="increment(todo)" color="primary">Number of skips</v-btn>
              <span>{{todo.count}}</span>
              <v-btn@click="decrement(todo)" color="error"> Wrong (-)</v-btn>
              <v-btn@click="deleteItem(index)">Delete</v-btn>
            </v-card-actions>
          </v-card>
        </div>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
+ import Field from "./Field";

export default {
  data(){
    US>return{
      count —0,
      name: '' ,
      todos: [ ]
    };
  },
+  components: {
+    field
+  },
  mounted() {
    This.todos=JSON.parse(localStorage.getItem("todos")")||[];
  },
  methods: {
    addTo(){

All Count.vue Codes

Field.vue↓

<template>
  <v-text-field label="note" v-model="memo">/v-text-field>
</template>

<script>
export default {
  data(){
    US>return{
      US>"memo:"
    };
  },
  mounted() {
    if(localStorage.memo)this.memo=localStorage.memo;
  },
  watch: {
    memo(newMemo){
      localStorage.memo = newMemo;
    }
  }
};
</script>

What should I do to solve this problem?Also, do you have the necessary knowledge to solve this problem?Or can't we solve this problem?
I'm sorry for the poor question, but please reply.

javascript html5 vue.js windows-10

2022-09-30 17:35

1 Answers

The first question I had was to separate it into Field.vue, but how about putting it down for each person and managing it with vuex?In that case, I think we will save each value as state instead of data to local storage or DB.


2022-09-30 17:35

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.