vue.js 如何在父组件数组中添加新任务？

wsewodh2 于 2023-05-07 发布在 Vue.js

关注(0)|答案(3)|浏览(109)

我希望添加一个新的任务对象，并通过单击Add按钮在父组件数组中可视化它。但我有一个错误newTask是没有定义。即使我在子组件中形成newTasks并将其传递给vuex中的父数组。
https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=store%2Findex.js,components%2FTask.vue,pages%2Findex.vue

// Child component

methods: {
    addTask() {
      let newTask = {
        id: Math.floor(Math.random() * 25),
        title: this.title,
        completed: false,
      };
      if (newTask) {
        console.log(newTask);
        this.$store.dispatch('addTask', newTask);

        this.title = '';
      }
    },
  }
  
  // Store
  
  export const state = () => ({
  tasks: [],
});
  
  const actions: {
    async addTask(context, data) {
    data = {
      ...data,
      newTask,                        // getting an error here - newTask is not defined
 
    };
    const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'appication/json;charset=utf-8',
      },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      let result = await res.json();
      context.dispatch('getTasks');
    }
    return res.ok;
  },
  }
  
  const mutations: {
    setTasks(state, data) {
    state.tasks = data;
    },
  }

储存

vue.js

来源：https://stackoverflow.com/questions/76182516/how-to-add-a-new-task-into-the-parent-component-array

3条答案

按热度按时间

6ss1mwsb1#

看起来您试图将newTask作为addTask动作中发送的data对象的属性传递，但是newTask没有在actions对象的作用域中定义。
要解决此问题，您只需从data对象中删除newTask属性：

async addTask(context, data) {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'appication/json;charset=utf-8',
      },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      let result = await res.json();
      context.dispatch('getTasks');
    }
    return res.ok;
},

您已经将newTask对象作为第二个参数传递给子组件（this.$store.dispatch('addTask', newTask)）中的addTask操作，因此它将在操作中作为data参数可用。
此外，在setTasks变化中，您将state.tasks设置为整个响应数据对象（state.tasks = data），但您可能只想将其设置为新添加的任务对象。要解决此问题，您可以将突变更改为：

mutations: {
    setTasks(state, newTask) {
      state.tasks.push(newTask);
    },
}

这将把新任务添加到state.tasks数组中，而不是用整个响应数据对象覆盖它。

赞(0）回复(0）举报 2023-05-07

ao218c7q2#

我检查了你的项目，发现了错误。

async addTask(context, data) {
    const res = await fetch('https://jsonplaceholder.typicode.com/todos', {
      method: 'POST',
      headers: {
        'Content-Type': 'appication/json;charset=utf-8',
      },
      body: JSON.stringify(data),
    });
    if (res.ok) {
      let result = await res.json();
      context.dispatch('getTasks');
    }
    return res.ok;
},

当你调用API时，Backend没有添加newTask，这是错误的。因此，当您获得响应时，没有您添加的newTask数据。

赞(0）回复(0）举报 2023-05-07

iklwldmw3#

你有后端代码吗？我认为你应该修改https://jsonplaceholder.typicode.com/todos请求的控制器。在此控制器中，不处理addTask请求。addTask请求未插入到数据库。你必须修改后端的控制器。你可以给予我后端，然后我会解决这个错误。

赞(0）回复(0）举报 2023-05-07