javascriptvue.js

How to check it and write parameter which can be null in 1 line of code?


On a Laravel/Vue site I made editor in both edit and insert mode and I pass task and editMode parameters:

export default defineComponent({
    props: {
        task: {
            type: Object,
            required: false, // In Insert mode property is empty
        },
        editMode: {
            type: Number,
            required: true,
        },

        
    setup(props) {
        let task = ref(props.task)
        let editMode = ref(props.editMode === 1)

        const form = ref({
            id: editMode ? task.value.data.id : '',
            title: editMode ? task.value.data.title : '',
            ...
        })
     

The code above work ok, if editMode is true, but otherwise I got error:

Uncaught (in promise) TypeError: task.value is undefined     

I suppose that in ? : construction task.value.data.id is rendered (I hoped no) anyway, even in case editMode is false. How can I check it and write it in 1 line of code?

"@inertiajs/vue3": "^2.0.0",
"vue": "^3.4.0"
"element-plus": "^2.9.5"

Solution

  • I didn't test this but I think it should get rid of that error.

    let task = ref(props.task || {})
    
    const form = ref({
                id: editMode.value && task.value?.data?.id ? task.value.data.id : '',
                title: editMode.value && task.value?.data?.title ? task.value.data.title : '',
            })