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

原文由 bencarter78 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

VueJS 1.x

使用 v-el 指令可能更容易，它允许您将组件中的元素映射到 this.$els 上的 vm 属性。

此外，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>

原文由 nils 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 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 文档 中找到有关该更改的更多信息。

原文由 Gustavo Straube 发布，翻译遵循 CC BY-SA 4.0 许可协议