querySelector在Vue的mount中不起作用

问题描述

我正在使用markdown-it-vue即时将Markdown渲染为HTML：

@H_404_4@

<template>
  <div ref="content">
    <markdown-it-vue :content="content" />
    <code>foobar</code>
  </div>
</template>

修改道具content时，HTML内容将注入到<markdown-it-vue>组件中。

此HTML内容包含一些<code>标签，我想用其他标签替换它们。不幸的是，我无法通过以下方式选择它们：

@H_404_4@

 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')，我将得到所有元素。

如何访问/替换子组件中生成的内容？

我尝试做不同的操作，但是存在相同的问题：

@H_404_4@

<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 (将#修改为@）

javascript jquery-selectors vue.js