[Vuejs]-The object properties passed to modal dialog from the list don't display using Vue 3 (Composition API)

0👍

In your modal, you are declaring selectedItem as a reactive object, references in the template are bound to this object:

let selectedItem = reactive({...})

Then you assign a new object to the variable:

function showModal(item) {
  selectedItem = cloneDeep(item);
}

But this only affects the variable in your script, the template references still point to the initial value of selectedItem.


Instead, declare selectedItem as a ref:

const selectedItem = ref({...})

and then assign to the ref’s value:

function showModal(item) {
  selectedItem.value = cloneDeep(item);
}

You’ll have to adjust other access to the variable in your script (but not in template):

const isDisabled = computed(() => {
  if (!selectedItem.value.type || !selectedItem.value.typeName) {
    ...

Alternatively, you can use reactive(), but nest selectedItem:

const data = reactive({
  selectedItem: {...}
})

and

function showModal(item) {
  data.selectedItem = cloneDeep(item);
}

Leave a comment