vue.jsvuejs3inertiajs

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:

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>