Accessing an element inside a Vuejs component

Question

I'm trying to access an element from the dom from within my Vue component but I just get 'null'. If I go into dev tools and try I can access it. I'm assuming it's a scoping issue but I can't find the answer.

<template>
    <ul class="list-group" id="criteria" v-for="item in criteria">
        <li class="list-group-item">{{ item.name }}</li>
    </ul>
</template>

<script>
    export default {
        template: "report-criteria",
        data() {
            return {
                criteria: []
            }
        },
        ready() {
            console.log(document.getElementById('criteria'));
        },
        methods: {},
    };
</script>

The line template: "report-criteria" should be removed

Jeff
– Jeff

2016-04-29 13:44:02 +00:00
Commented Apr 29, 2016 at 13:44 — Jeff
– Jeff, Commented Apr 29, 2016 at 13:44

tony19 · Accepted Answer · 2022-07-15 19:46:56Z

43

The answer posted by @nils is for VueJS 1.x. The v-el directive was removed in newer versions. It was replaced by ref attribute.

To achieve that same result in VueJS 2.x, you should do the following instead:

<template>
  <ul class="list-group" id="criteria" ref="criteria" v-for="item in criteria">
    <li class="list-group-item">{{ item.name }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        criteria: []
      }
    },
    mounted() {
      console.log(this.$refs.criteria);
    },
    methods: {},
  };
</script>

You may find more info about that change in VueJS docs.

edited Jul 15, 2022 at 19:46

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 28, 2017 at 18:17

Gustavo Straube

3,8916 gold badges45 silver badges68 bronze badges

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

2 Comments

Diego Over a year ago

Note that the example is incorrect for Vue 2, the method is called mounted instead of ready: vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

Gustavo Straube Over a year ago

Hey, @Diego! Thanks for the heads up. I focused my answer on the directives and didn't pay attention to that. I've just updated the sample code.

Denis Besic · Accepted Answer · 2017-08-22 12:36:05Z

17

VueJS 1.x

You're probably easier off using the v-el directive, which allows you to map elements in your component to an vm property on this.$els.

Also, AFAIK, you shouldn't combine the template property with templates in the .vue file (assuming you are using .vue files, of course).

<template>
    <ul class="list-group" id="criteria" v-el:criteria v-for="item in criteria">
        <li class="list-group-item">{{ item.name }}</li>
    </ul>
</template>

<script>
    export default {
        data() {
            return {
                criteria: []
            }
        },
        ready() {
            console.log(this.$els.criteria);
        },
        methods: {},
    };
</script>

edited Aug 22, 2017 at 12:36

Denis Besic

3,1473 gold badges27 silver badges36 bronze badges

answered Apr 29, 2016 at 11:53

nils

27.4k6 gold badges73 silver badges82 bronze badges

Comments

Nimantha · Accepted Answer · 2021-11-18 03:29:55Z

2

Here are the steps that worked for me:

Reference your $ref in the html element:

 <p ref = "myref">Welcome to myApp</p>

Define a boolean variable in the script:

shown = false

In the update life cycle hook, keep this code:

update(){

  if(this.shown){
       
     console.log(this.$refs.myref)
     your code
  
  }

}

Change the boolean to "true" inside your function like the below code:

test(){

this.shown = false
....
some code
....

this.shown = true // this will trigger the code written in the update hook

}

edited Nov 18, 2021 at 3:29

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Sep 10, 2019 at 18:58

rhythmo

9892 gold badges11 silver badges25 bronze badges

Collectives™ on Stack Overflow

Accessing an element inside a Vuejs component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related