vue can't querySelector for child component DOM element

Question

I cannot search for child component DOM element, my settings are as follows:

pages/Login.vue

<template>
 <section class="login">
    <div v-show="step === 4" class="login__container">
      <Test />
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      step: 1
    }
  },
  async mounted () {
      this.step = 4 
      await this.$nextTick()
      document.querySelector('.test') // NULL
  },
}
</script>

components/Test.vue

<template>
  <div class="test">
    foo
  </div>
</template>

setTimeout of course is not solution. I also try the same on other page, but without success. What am I doing wrong? I guess the problem must be somewhere in the template or project configuration

@edit

i tried to do the same effect on jsfiddle vue template and fresh nuxt project but no problem there

I'm not sure what you're trying to achieve here, but be careful with this kind of logic. This is usually not the recommended way to go. Also yeah, `setTimeout` is never really a great solution! — kissu, Aug 19 '21 at 10:05

score 2 · Answer 1 · edited Jul 16 '22 at 01:36

This kind of code should work properly

parent.vue

<template>
  <div>
    <test ref="parentTest" @hook:mounted="selectChildElement"></test>
  </div>
</template>

<script>
export default {
  methods: {
    selectChildElement() {
      console.log(this.$refs.parentTest.$refs.test)
    },
  },
}
</script>

Test.vue component

<template>
  <div ref="test">foo</div>
</template>

This is because of the way the parent and children components are mounted, as explained here: https://stackoverflow.com/a/44319825/8816585

As Brahim said, it is also better to use $refs in an SPA context, more info available here.

The @hook:mounted trick was taken from this answer and initially found in this dev.to post.

Your approach is correct and I have used it so far, but my logic does not fit that approach a bit. And I have finally found the answer. — JanuszO, Aug 19 '21 at 10:57

Batuhan · Answer 2 · 2021-08-19T10:32:14.243

1

Another way to access child component is emitting event when its ready and created in DOM,

In the child element:

    <template>
      <div ref="test">foo</div>
    </template>
    <script>
    export default {
      mounted() {
        this.$emit('childMounted', this.$refs.test)
      }
    }
    ...

In your parent:

    <template>
     <section class="login">
        <div v-show="step === 4" class="login__container">
          <Test @childMounted="childMounted"/>
        </div>
      </section>
    </template>
    
    <script>
    export default {
      data () {
        return {
          step: 1
        }
      },
      methods: {
       childMounted(childRef) {
         // Try here 
         // childRef: your child component reference
       }
      }
    }
    </script>

edited Aug 19 '21 at 10:32

answered Aug 19 '21 at 10:19

Batuhan

1,521
12
29

This is also a great way of doing things! – kissu Aug 19 '21 at 10:32
@JanuszO did you try this approach ? – Batuhan Aug 19 '21 at 10:33
I already know where the problem is, I will describe it soon – JanuszO Aug 19 '21 at 10:47

Boussadjra Brahim · Answer 3 · 2021-08-19T10:00:13.923

0

You could try to use ref instead of querySelector to manipulate the component DOM :

<template>
 <section class="login">
    <div v-show="step === 4" class="login__container">
      <Test ref="test"/>
    </div>
  </section>
</template>

<script>
export default {
  data () {
    return {
      step: 1
    }
  },
  mounted () {
      this.step = 4 
   
      let test=this.$refs.test
  },
}
</script>

edited Aug 19 '21 at 10:00

answered Aug 19 '21 at 09:54

Boussadjra Brahim

82,684
19
144
164

JanuszO · Answer 4 · 2021-08-19T11:02:54.493

0

As I thought, the problem is with nuxt, namely auto-importing components. I am using automatic component import in the nuxt configuration.

nuxt.config.js

  components: [
    {
      path: '~/components',
      pathPrefix: false,
    },
  ],

This approach apparently breaks something, and only after manually importing the component did it work properly

import Test from '@/components/Test.vue'

export default {
  name: 'LoginPage',
  components: {
    Test
  },

So the nuxt configuration caused the problem. Thank you for all your help.

edited Aug 19 '21 at 11:02

answered Aug 19 '21 at 10:55

JanuszO

1,140
12
25

Can you show us the directory of your project? Also does it have a `name`? – kissu Aug 19 '21 at 11:44
it's standard nuxt structure – JanuszO Aug 19 '21 at 11:47
it's your approach :-P https://stackoverflow.com/a/66336654/6345056 – JanuszO Aug 19 '21 at 11:50
generally auto importing components works fine, for nested structures too, but I have no idea why this hook doesn't fire what it should – JanuszO Aug 19 '21 at 11:56
Do you have a `name` on them? – kissu Aug 19 '21 at 12:19
i don't understand the question. This files are in "projectdir/nuxt.config.js" and "projectdir/components/SomeName.vue" – JanuszO Aug 19 '21 at 12:24
no errors, just not find DOM element from parent component like in example above – JanuszO Aug 19 '21 at 12:25
This is very strange because I can't bring it up on a new project, and I haven't done anything else to fix it – JanuszO Aug 19 '21 at 12:31
Do you have `name: 'Test',` in your `Test.vue` component? Do you maybe have a ``? Also, be sure to have both `ref` on both components. Otherwise, I guess we will need a [repro]. – kissu Aug 19 '21 at 12:43
What if you delete `node_modules` and install them again? – kissu Aug 20 '21 at 12:18
I did it, but no change – JanuszO Aug 20 '21 at 12:44

vue can't querySelector for child component DOM element

4 Answers4

Linked