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> 

Answer 1

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.