Доступ к элементу внутри компонента Vuejs

Я пытаюсь получить доступ к элементу из dom из моего компонента Vue, но я просто получаю "null". Если я зайду в инструменты dev и попробую, я могу получить к нему доступ. Я предполагаю, что это проблема, но я не могу найти ответ.

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

Может кто-нибудь помочь?

Ответ 1

VueJS 1.x

Вам, вероятно, проще использовать директиву v-el, которая позволяет вам сопоставлять элементы в вашем компоненте с свойством vm на this.$els.

Кроме того, AFAIK, вы не должны комбинировать свойство template с шаблонами в файле .vue (при условии, что вы используете файлы .vue, конечно).

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

Ответ 2

ответ, отправленный @nils, для VueJS 1.x. Директива v-el была удалена в более новых версиях. Он был заменен атрибутом ref.

Чтобы достичь такого же результата в VueJS 2.x, вы должны сделать следующее:

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

Более подробную информацию об этом изменении можно найти в VueJS docs.

Ответ 3

У меня была та же самая проблема, и я сослался на все ответы, доступные в Интернете, и ничто, казалось, не работало. Наконец, вот что сработало для меня

STEP1)

ссылаться на ваш $ ref в HTML-элементе

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