vue.js 3 .value.click is not a function

Question

    <template>
            <RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
    </template>

    <script setup>
    import RecyclablesPopup from "../components/popups/RecyclablesPopup";
    import { ref } from 'vue';
    const LVP = ref(null);

    // ... after mounted I have an event with a legacy component and onclick handler:
    eventClick: function(calEvent)
        {
            console.log(LVP.value);
            LVP.value.click();
        }
    </script>

At the end I get Uncaught TypeError: LVP.value.click is not a function after I clicked.

console.log returns me the proxy object as expected Proxy { <target>: Proxy, <handler>: {…} }

Why can't I call click()?

Penny Liu · Accepted Answer · 2023-08-22 02:52:09Z

3

the click function should be exposed by the child component in order be accessed by the parent component :

RecyclablesPopup component

<script setup>

function click(){
  //.......
}
defineExpose({
 click
})
</script>

for more details please check https://vuejs.org/guide/essentials/template-refs.html#ref-on-component

edited Aug 22, 2023 at 2:52

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Jul 11, 2022 at 12:13

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PiTheNumber Over a year ago

Thanks. defineExpose did the trick! I thought I could call the normal html element click function, but somehow that does not work.

PiTheNumber · Accepted Answer · 2022-07-11 12:47:04Z

3

If you are using script setup you can't access functions, variables, etc., defined inside the referenced component. To change that you have to use the defineExpose compiler macro inside RecyclablesPopup component - check more in documentation

//inside RecyclablesPopup
<script setup>
import { ref } from 'vue'

const click = () => {
    //do something
}

defineExpose({
    click,
})
</script>

edited Jul 11, 2022 at 12:47

PiTheNumber

23.7k17 gold badges114 silver badges191 bronze badges

answered Jul 11, 2022 at 12:16

TymoteuszLao

9541 gold badge8 silver badges18 bronze badges

Comments

Mina · Accepted Answer · 2022-07-11 12:10:40Z

0

You need to execute the function on the onMounted lifecycle to guarantee that the component is mounted to the DOM, as the value before the component is mounted will be undefined.

onMounted(() => {
  eventClick()
})

For more resources

https://vuejs.org/api/composition-api-lifecycle.html#onmounted

answered Jul 11, 2022 at 12:10

Mina

17.8k3 gold badges24 silver badges39 bronze badges

1 Comment

PiTheNumber Over a year ago

Same problem with onMounted(() => { LVP.value.click(); });

Collectives™ on Stack Overflow

vue.js 3 .value.click is not a function

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related