Vuejs method returning {isTrusted: true} instead of actual object

I have the following vuejs component code where the ‘console.log({…newTask})’ part of the code renders correctly outside of the ‘createNewTask’ function but when inside this function, it returns {isTrusted: true} and not the actual data. What am I doing wrong?

<template>
<div class="newTaskForm">
  <h1>Create New Task</h1>
  <form @submit.prevent="createNewTask">
    <div class="form-group">
      <label for="newTaskDescription">Task Description</label>
      <input class='form-control' type="text" v-model='newTask.taskDescription' placeholder="Add task description here" required>
    </div>
    <button type='submit' class='btn btn-success'>Create</button>
  </form>
</div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const newTask = reactive({ taskDescription: 'first written task' });
    console.log({ ...newTask })
    console.log(newTask.taskDescription);

    const createNewTask = ({ ...newTask }) => {
      console.log({ ...newTask })
    }

    return {
      newTask,
      createNewTask
    }
  }
}
</script>

<style>

</style>

Answer

Seems to me like you’re doing an extra, unnecessary destructure of newTask.

Also, you were passing the event of onsubmit instead of the task itself! That’s why the output was wrong.

import { reactive } from 'vue';

export default {
  setup() {
    const newTask = reactive({ taskDescription: 'first written task' });
    console.log({ ...newTask })
    console.log(newTask.taskDescription);

    const createNewTask = () => {
      console.log({ ...newTask })
    }

    return {
      newTask,
      createNewTask
    }
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *