我试图从我的 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 @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 中找到有关该更改的更多信息.
关于javascript - 访问 Vuejs 组件内的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36937437/