L'accès à un élément à l'intérieur d'un composant Vuejs

J'essaye d'accéder à un élément du dom à partir de l'intérieur de ma Vue mais je viens d'obtenir la valeur 'null'. Si je vais dans outils de dev et d'essayer je peux y accéder. Je suis en supposant que c'est une étude sur la portée de la question, mais je ne peux pas trouver la réponse.

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

Quelqu'un peut-il aider s'il vous plaît?

La ligne template: "report-criteria" doit être supprimé

OriginalL'auteur bencarter78 | 2016-04-29

  1. 14

    VueJS 1.x

    Vous êtes probablement plus facile en utilisant le v-el la directive, qui permet aux éléments de la carte dans votre composant à une vm de propriété sur this.$els.

    Aussi, autant que je sache, vous ne devriez pas mélanger les template propriété avec des modèles dans le .vue fichier (en supposant que vous utilisez .vue fichiers, bien sûr).

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

    OriginalL'auteur nils

  2. 31

    La réponse posté par @nils est pour VueJS 1.x. Le v-el directive a été supprimé dans les versions plus récentes. Il a été remplacé par ref attribut.

    Pour atteindre le même résultat en VueJS 2.x, vous devez faire ce qui suit:

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

    Vous pouvez trouver plus d'infos à propos de ce changement dans VueJS docs.

    Notez que l'exemple est incorrect pour Vue 2, la méthode est appelée mounted au lieu de ready: vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
    Hey, @Diego! Merci pour le heads up. J'ai porté ma réponse sur les directives et ne pas payer attention à ce que l'. J'ai juste mis à jour le code d'exemple.

    OriginalL'auteur Gustavo Straube