Composition API — как получить доступ к объекту внутри него во VUE.js?

Question

[Петр Сергеев]

Не удается понять как решить данную ошибку:
Cannot read properties of undefined (reading 'deadLine')
Ошибка в прочтении свойства deadLine в свойстве deadLineTimestamp одного объекта data.
Как можно решить эту ошибку?

Задача вообще взять из дату и отправить на сервер ее в формате таймпстамп.

<template>
  <form class="card" @submit.prevent="createTask">
    <h1>{{ titleblock }}</h1>
    <div class="form-control">
      <label for="title">Название</label>
      <input type="text" id="title" v-model="title">
    </div>

    <div class="form-control">
      <label for="date">Дата дэдлайна</label>
      <input type="date" id="date" v-model="deadLine">
    </div>

    <div class="form-control">
      <label for="description">Описание</label>
      <textarea id="description" v-model="description"></textarea>
    </div>

    <button class="btn primary">Создать</button>
  </form>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const title = ref('Создать новую задачу!');

    const data = reactive({
      title: '',
      deadLine: new Date(),
      deadLineTimestamp: new Date(this.deadLine).getTime(), //ОШИБКА
      description: ''
    });

    function createTask() {
      store.dispatch('getTasks', data);
    }

    return {
      titleblock: title,
      ...toRefs(data),
      createTask
    };
  }
};
</script>

Answer 1

[0xD34F]

Уберите deadLineTimestamp из data, вместо data передавайте в экшен

{
  title: data.title,
  deadLineTimestamp: new Date(data.deadLine).getTime(),
  description: data.description,
}

Comments

[Петр Сергеев]

Спасибо.
А внутри data никак нельзя обратиться к собственным полям, как если бы это был обычный объект?

[0xD34F]

Петр Сергеев, можно сделать геттер.