Vue3 Composition API: nested template refs

Question

currently i am rewriting my Vue 3 application to use the Composition API and I have a problem rewriting

methods: {
  isDataValid() {
    if (this.$refs.data.$refs.cost.enabled) {
      return this.$refs.data.$refs.cost.$refs.module.dataValid();
    }
  }
}

From the Vue Official Template Refs Docs I know I have to create a ref and assign it to the corresponding component but I do not understand how to do it in my special case with nested refs. The child components still use the Options API, how can I archive the rewriting for my case?

I would rethink how this is done. Parent directly accessing data of Child or Grandchild component is not good practice. A change in the child's code code break the code in the parent, for example. I think they made this type of coding practice harder to accomplish in Composition API on purpose. It's better for child components to emit data, or use something like global store, e.g. pinia — yoduh
– yoduh, Commented Apr 8, 2024 at 16:49

moon · Accepted Answer · 2024-04-09 02:35:16Z

0

I just rewrite the parent component,I think you can rewrite the children follow this.

<child ref="data"/>
...
const data = ref()
function isDataValid(){
if (data.value.$refs.cost.enabled) {
      return data.value.$refs.cost.$refs.module.dataValid();
    }
}

answered Apr 9, 2024 at 2:35

moon

1,1641 gold badge2 silver badges9 bronze badges

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

Collectives™ on Stack Overflow

Vue3 Composition API: nested template refs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related