How to access variable in "setup" in a closure that has a parameter with the same name?

[kkqy]

<script setup>
import { ref } from "vue"
const apple = ref()  // I want to access this variable in open()
const modal = ref() // a modal that shows the dialog.
defineExpose({
    open: (apple) => {  // "apple" overrides the ref apple.
        this.apple.value = apple // not working. "this" is not available. so how to do ?
        modal.open()
    }
})
</script>

This component is a share modal that can be invoked by other components. so I use exposed function to pass data instead of props.
I know that I can use defferient names to avoid "override" , but I don't want to add a prefix like underline to the name.

I wonder if there is a way to access variable in "setup" that has the same name with parameter.

[josueayala27]

The issue with the original code lies in the attempt to use this within the defineExpose function. In Vue 3, when using the Composition API with <script setup>, you don't have access to this inside the script. Instead, you directly reference the reactive variables created with ref.

In your case, apple and modal are both refs, so you should use apple.value and modal.value to access and modify their values. The corrected code reflects this adjustment, eliminating the attempt to use this within the defineExpose function.

In the defineExpose function, you can directly reference the apple ref without using this. Here's the corrected code:

<script setup>
import { ref } from "vue"

const apple = ref()
const modal = ref()

defineExpose({
    open: (newApple) => {
        apple.value = newApple
        modal.value.open()
    }
})
</script>

Now, you can access the apple ref directly without using this. Also, make sure to use modal.value.open() to access the open method of the modal ref.