Javascript 如何使用Vue JS在子组件中保持数字和增量？

练习使用Vue JS制作todo应用程序

保存在localStrage中的输入项

已更新

当您添加了一些列表并重新加载页面时，ID号从1（defalut）开始

理想行为：

• 重新加载页面时，ID号继续递增
• 如果删除了某些项，则添加新项，ID号应该是数组中最大的ID号（如果8）+1（应该是9）

我的代码：

问题就在这附近

Child2.vue

  created() {
    let keyObject = JSON.parse(localStorage.getItem(this.keyName));

    if (keyObject) {
      this.$emit("update:todos", keyObject);
    } else {
      return;
    }

    if (this.todos.length > 0) {
      console.log(this.todos.id);
      const setId = this.todos.reduce(function(a,b){ return a > b.id ? a : b.id} ,0)
      this.todos.id = setId + 1
      console.log(this.todos.id);

      this.$emit('update:todos', keyObject)
      // this.$emit('update:todos', this.todos.id)
    }
  },

---

你知道怎么做吗？

你可以避免直接使用修改器修改道具：

App.vue：

儿童2.vue：

if（键对象）{
此.emit（'update:todos'，keyObject'）；
}

对于获取下一个id，可以在从本地存储获取阵列时发出此值：

App.vue：

方法：{
// ...
setTargetId（新目标）{
this.$set（this.target，'id'，newTargetId）；
}
}

儿童2.vue：

/。。。
创建（）{
让keyObject=JSON.parse（localStorage.getItem（this.keyName））；
//检查键对象
if（键对象）{
//在App.vue上更新todo
这是.$emit（“更新：todos”，keyObject）；
//设置target.id
const setId=keyObject.reduce（函数（a，b）{返回a>b.id？a:b.id}，0）
此.$emit（'setTargetId'，setId+1）
} 
},

---

请参见此处：

您可以避免直接使用修改器修改道具：

App.vue：

儿童2.vue：

if（键对象）{
此.emit（'update:todos'，keyObject'）；
}

对于获取下一个id，可以在从本地存储获取阵列时发出此值：

App.vue：

方法：{
// ...
setTargetId（新目标）{
this.$set（this.target，'id'，newTargetId）；
}
}

儿童2.vue：

/。。。
创建（）{
让keyObject=JSON.parse（localStorage.getItem（this.keyName））；
//检查键对象
if（键对象）{
//在App.vue上更新todo
这是.$emit（“更新：todos”，keyObject）；
//设置target.id
const setId=keyObject.reduce（函数（a，b）{返回a>b.id？a:b.id}，0）
此.$emit（'setTargetId'，setId+1）
} 
},

---

请参见此处：

根据我对您问题的理解，您希望从子组件更新道具的值

updateTodos(value) {
 this.todos = value
}

为此，您可能希望将更改从子组件发送回父组件

下面是一种方法：

在子组件中：

this.todosArray = this.todosArray.concat(keyObject); //concat with an existing array
this.$emit("updateTodos", this.todosArray); //emit new array back to parent

<Child2 :todos="todos" :keyName="keyName" @updateTodos="updateTodos"/>

在父组件中，注册子组件：

this.todosArray = this.todosArray.concat(keyObject); //concat with an existing array
this.$emit("updateTodos", this.todosArray); //emit new array back to parent

<Child2 :todos="todos" :keyName="keyName" @updateTodos="updateTodos"/>

---

我希望有帮助。祝你好运

根据我对您问题的理解，您希望更新子组件中道具的值

updateTodos(value) {
 this.todos = value
}

为此，您可能希望将更改从子组件发送回父组件

下面是一种方法：

在子组件中：

this.todosArray = this.todosArray.concat(keyObject); //concat with an existing array
this.$emit("updateTodos", this.todosArray); //emit new array back to parent

<Child2 :todos="todos" :keyName="keyName" @updateTodos="updateTodos"/>

在父组件中，注册子组件：

this.todosArray = this.todosArray.concat(keyObject); //concat with an existing array
this.$emit("updateTodos", this.todosArray); //emit new array back to parent

<Child2 :todos="todos" :keyName="keyName" @updateTodos="updateTodos"/>

---

我希望有帮助。祝你好运

keyObject和this.todos中的格式不一致（this.todos实际上是嵌套的），您不应该修改道具

还要注意ID的增加，以避免循环中出现重复错误

我的建议App.vue：

methods: {
    addBtn() {

      const todo = { id: this.target.id, name: this.target.name, done: false };
      this.todos.push(todo);
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      this.target.name = "";
      //it is important to increment the id based on current length
      this.target.id = this.todos.length + 1;
    },
    onInputChange(val) {
      this.target.name = val;
    }
  },
  created() {
     let todosObject  = JSON.parse(localStorage.getItem(this.keyName));
     if(todosObject){
       this.todos = todosObject
       //again base the id on the current length, to avoid duplicate error in loops later 
       this.target.id = this.todos.length+1
     }

  }

儿童2：

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        ID: {{ todo.id }} / Name: {{ todo.name }}
        <input
          type="checkbox"
          v-model="todo.done"
          @click="status(todo)"
        >
        <button @click="removeBtn(todo)">Remove item</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true
    },
    keyName: {
      type: String,
      required: true
    }
  },

  methods: {
    removeBtn(item) {
      const index = this.todos.indexOf(item);
      this.todos.splice(index, 1);
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      if (this.todos.length === 0) {
        console.log("no item");
      }
    },
    status(todo) {
      todo.done = !todo.done;
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
    }
  }
};
</script>

ID:{{todo.ID}}/名称：{{todo.Name}
删除项目


导出默认值{
道具：{
待办事项：{
类型：数组，
必填项：true
},
关键字名称：{
类型：字符串，
必填项：true
}
},
方法：{
移除BTN（项目）{
常量索引=此.todos.indexOf（项）；
这个.todos.splice（索引，1）；
setItem（this.keyName，JSON.stringify（this.todos））；
if（this.todos.length==0）{
控制台日志（“无项”）；
}
},
状态（待办事项）{
todo.done=！todo.done；
setItem（this.keyName，JSON.stringify（this.todos））；
}
}
};

keyObject和this.todos中的格式不一致（this.todos实际上是嵌套的），您不应该修改props

还要注意ID的增加，以避免循环中出现重复错误

我的建议App.vue：

methods: {
    addBtn() {

      const todo = { id: this.target.id, name: this.target.name, done: false };
      this.todos.push(todo);
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      this.target.name = "";
      //it is important to increment the id based on current length
      this.target.id = this.todos.length + 1;
    },
    onInputChange(val) {
      this.target.name = val;
    }
  },
  created() {
     let todosObject  = JSON.parse(localStorage.getItem(this.keyName));
     if(todosObject){
       this.todos = todosObject
       //again base the id on the current length, to avoid duplicate error in loops later 
       this.target.id = this.todos.length+1
     }

  }

儿童2：

<template>
  <div>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        ID: {{ todo.id }} / Name: {{ todo.name }}
        <input
          type="checkbox"
          v-model="todo.done"
          @click="status(todo)"
        >
        <button @click="removeBtn(todo)">Remove item</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true
    },
    keyName: {
      type: String,
      required: true
    }
  },

  methods: {
    removeBtn(item) {
      const index = this.todos.indexOf(item);
      this.todos.splice(index, 1);
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
      if (this.todos.length === 0) {
        console.log("no item");
      }
    },
    status(todo) {
      todo.done = !todo.done;
      localStorage.setItem(this.keyName, JSON.stringify(this.todos));
    }
  }
};
</script>

ID:{{todo.ID}}/名称：{{todo.Name}
删除项目


导出默认值{
道具：{
待办事项：{
类型：数组，
必填项：true
},
关键字名称：{
类型：字符串，
必填项：true
}
},
方法：{
移除BTN（项目）{
常量索引=此.todos.indexOf（项）；
这个.todos.splice（索引，1）；
setItem（this.keyName，JSON.stringify（this.todos））；
if（this.todos.length==0）{
控制台日志（“无项”）；
}
},
状态（待办事项）{
todo.done=！todo.done；
setItem（this.keyName，JSON.stringify（this.todos））；
}
}
};

问题是

这个.todos.push（keyObject）因为它将创建嵌套数组。您需要使用concat附加数组，或者对
keyObject
的每个元素调用push。举例来说，如果您保存了项目A、B、C，该行将创建
[[A、B、C]]
，并添加您现在拥有的第四个项目
[[A、B、C]，D]
。每次你重新加载应用程序时，嵌套都会累积。我不确定你的目标是什么，因为你说明了3种不同的方法ones@ChrisG，谢谢你的评论。我将尝试使用
concat
来更新
todos
数组。@Billal Begueradj，很抱歉造成混淆。我是vue的新手，我正在练习并试图理解它问题是
this.todos.push（keyObject）因为它将创建嵌套数组。您需要使用concat附加数组，或者对