Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Error: Cannot read properties of "undefined" variable (vue/Inertia) got from props

Here is a part of the page code (beginning):

<script setup>
import { reactive } from 'vue'
import { Link } from "@inertiajs/vue3";

defineProps({
    post: Array
});

const form = reactive({
    title: this.post.title, //Error - TypeError: Cannot read properties of undefined (reading 'post')
    content: this.post.content
});

function submit() {
   // router.post('/posts', form)
}
</script>

Reading Inertia’s documentation did not yield any results. Please help me

It is necessary that the data in the form on the page be filled with data from the "post" variable.
tried this:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

defineProps({
    post: Object 
});

const form = reactive({
    title: post.title,    
    content: post.content 
});

"this" var is still "undefined"

>Solution :

You should assign defineProps to a constant, then use that constant to access props :


<script setup>
import { reactive } from 'vue'
import { Link } from "@inertiajs/vue3";

const props = defineProps({
    post: Object // change this to an Object
});

const form = reactive({
    title: props.post.title, 
    content: props.post.content
});

function submit() {
   // router.post('/posts', form)
}
</script>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading