When using Laravel, I am attempting to pass data to a Vue component. Depending on whether the user enters the component through an edit URL or a create URL, we send either an array of data or null. Here is an example of how this process works:
Blade view
<section id="app">
<people-form-component :person="{{$person ?? 'null'}}"></people-form-component>
</section>
This process functions correctly as it displays the data if available, otherwise showing null.
Data array
{"id":1,"created_at":"2021-11-05T19:03:14.000000Z","updated_at":"2021-11-05T19:03:14.000000Z","name":"Eduardo Montoya","lastname":"Jurado","age":83,"dni":"19282246N","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="553f20343b34656715302d34382539307b363a38">[email protected]</a>","id_car":8}
I then proceed to retrieve this prop in my component to show/hide text and call functions accordingly.
People Form Component (Complete code pasted for reference)
<template>
<div class="center">
<div
class="w-1/2 bg-white rounded p-8 m-6 shadow-md rounded hover:shadow-2xl transition duration-500 ease-in-out">
<h1 class="block w-full text-center text-gray-800 text-2xl font-bold mb-6">
{{this.person!=''? 'Update' :'Create'}}</h1>
...
</template>
<script>
export default {
name: 'PeopleForm',
...
}
</script>
Encountering some errors while working with Vue:
Error 1: When loading the component in the create route, TypeError occurs - "Cannot read properties of null (reading 'name')"
Error 2: When clicking update in the update component, another TypeError is thrown - "Cannot read properties of null (reading 'person')"
As a newcomer to Vue, I am unsure about resolving these basic issues. Can someone provide guidance?