Accesso a un elemento all'interno di un componente Vuejs

Question

Sto provando ad accedere a un elemento dal dom dal mio componente Vue ma ottengo solo "null". Se vado negli strumenti di sviluppo e provo, posso accedervi. Suppongo che sia un problema di scoping ma non riesco a trovare la risposta.

<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> 

Qualcuno può aiutare per favore?

Answer 1

VueJS 1.x

Sei probabilmente più facile fuori usando la direttiva v-el, che consente di mappare elementi del componente per una proprietà di VM this.$els.

Inoltre, per quanto ne so, non si dovrebbe combinare la proprietà template con i modelli nel file .vue (si sta assumendo con .vue file, ovviamente).

<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> 

Answer 2

Il answer inviato da @nils è per VueJS 1.x. La direttiva v-el è stata rimossa nelle versioni più recenti. È stato sostituito dall'attributo ref.

per raggiungere questo stesso risultato in VueJS 2.x, si dovrebbe fare il seguente invece:

<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> 

Si possono trovare maggiori informazioni riguardo ai cambiamenti a VueJS docs.