可以说我有一个像这样的单个文件组件:
<template>
// doesn't matter
</template>
<script>
export default {
data() {
return {
redStates: [
"Isfahaan",
"Qom",
"Tehraan",
"Semnaan",
...
],
};
},
methods: {
colorize(paths) {
paths.forEach((path) => {
if (this.redStates.indexOf(path.getAttribute("class")) !== -1) {
path.setAttribute("class", "red");
}
});
},
},
};
window.onload = () => {
const paths = document.querySelectorAll(".Provinces path");
paths.forEach((path) => {
if (this.redStates.indexOf(path.getAttribute("class")) !== -1) {
path.setAttribute("class", "red");
}
});
};
</script>
<style >
...
</style>
有没有办法在“导出默认值”之外访问方法(在这种情况下为“ colorize”)?(在这种情况下为“ window.onload”事件)
您可以将事件侦听器定义移动created
生命周期的方法,即到组件的定义,在这里你可以访问colorize
使用this.colorize
:
data() {...},
created () {
window.onload = () => {
const paths = document.querySelectorAll(".Provinces path");
this.colorize(paths);
}
},
methods: ...
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句