访问Vuejs组件内的元素

Question

我正试图从我的Vue组件中访问dom中的元素,但我只是得到'null'.如果我进入开发工具并尝试我可以访问它.我认为这是一个范围问题,但我找不到答案.

<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

的回答发表@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文档中找到有关该更改的更多信息.

Answer 2

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>