如何解决querySelector在Vue的mount中不起作用
我正在使用markdown-it-vue
即时将Markdown渲染为HTML:
<template>
<div ref="content">
<markdown-it-vue :content="content" />
<code>foobar</code>
</div>
</template>
修改道具content
时,HTML内容将注入到<markdown-it-vue>
组件中。
此HTML内容包含一些<code>
标签,我想用其他标签替换它们。不幸的是,我无法通过以下方式选择它们:
mounted() {
this.$refs.content.querySelectorAll('code').forEach(code => {
console.log(code)
})
},
仅找到<code>foobar</code>
,而没有找到<markdown-it-vue>
中的那些。但是,它们在DOM中,因为如果我执行console.log(this.$refs.content)
并从调试控制台对该变量运行querySelectorAll('code')
,我将得到所有元素。
如何访问/替换子组件中生成的内容?
我尝试做不同的操作,但是存在相同的问题:
<template>
<div ref="content">
</div>
</template>
<script>
import Vue from 'vue'
import MarkdownItVue from 'markdown-it-vue'
let MyMarkdownItVue = Vue.extend(MarkdownItVue)
export default {
props: {
content: String,},mounted() {
let md = new MyMarkdownItVue({propsData: {content: this.content}});
md.$mount();
// Displays the full output with all my `<code>` tags
console.log(md.$el);
// But nothing is found there. I get an empty NodeList []
console.log(md.$el.querySelectorAll('code'))
}
};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。