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"
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 : '',
})