Javascript 访问 Vuejs 组件内的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36937437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing an element inside a Vuejs component
提问by bencarter78
I'm trying to access an element from the dom from within my Vue component but I just get 'null'. If I go into dev tools and try I can access it. I'm assuming it's a scoping issue but I can't find the answer.
我试图从我的 Vue 组件中访问 dom 中的一个元素，但我只是得到“空”。如果我进入开发工具并尝试我可以访问它。我假设这是一个范围界定问题，但我找不到答案。
<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>
Can someone help please?
有人可以帮忙吗？
采纳答案by nils
VueJS 1.x
VueJS 1.x
You're probably easier off using the v-eldirective, which allows you to map elements in your component to an vm property on this.$els.
您可能更容易使用该v-el指令，它允许您将组件中的元素映射到 vm 属性this.$els。
Also, AFAIK, you shouldn't combine the templateproperty with templates in the .vuefile (assuming you are using .vuefiles, of course).
此外，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>
回答by Gustavo Straube
The answerposted by @nils is for VueJS 1.x. The v-eldirective was removed in newer versions. It was replaced by refattribute.
@nils 发布的答案适用于 VueJS 1.x。该v-el指令已在较新版本中删除。它被ref属性取代。
To achieve that same result in VueJS 2.x, you should do the following instead:
要在 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>
You may find more info about that change in VueJS docs.
您可以在VueJS 文档中找到有关该更改的更多信息。
回答by rhythmo
I had the same issue and I referred to all the answers available in the internet and nothing seemed to work. Finally, here is what worked for me
我遇到了同样的问题，我参考了互联网上所有可用的答案，但似乎没有任何效果。最后，这对我有用
STEP1)
第1步）
reference your $ref in the html element
在 html 元素中引用您的 $ref
<p ref = "myref">Welcome to myApp</p>STEP2)
第2步）
define a boolean variable in the script
在脚本中定义一个布尔变量
shown = false
显示 = 假
STEP3)
步骤 3)
In the update life cycle hook, keep this code
在更新生命周期钩子中，保留这段代码
update(){
if(this.shown){
console.log(this.$refs.myref)
your code
}
}STEP4)
第四步）
change the boolean to "true" inside your function like the below code
在您的函数中将布尔值更改为“true”，如下面的代码
test(){
this.shown = false
....
some code
....
this.shown = true // this will trigger the code written in the update hook
}This is what worked for me. Hope this helps someone else... Happy coding :)
这对我有用。希望这对其他人有帮助...快乐编码:)
