使用Vue.js和Axios操作注入HTML失败，求排查代码问题

你遇到的核心问题是异步数据加载时机把控不当，再加上轮播逻辑的小错误，导致无法操作渲染后的OL列表项。我们一步步拆解问题并给出解决方案：

1. 为什么mounted里拿不到OL的列表项？ #

mounted钩子执行时，你的axios请求还在异步处理中，posts数据还没更新，v-html还没把OL渲染到DOM里。这时候用document.querySelectorAll自然拿不到任何元素，announcements.length会是0，轮播逻辑根本跑不起来。

在Vue里，当依赖的异步数据更新后，必须等待DOM完成渲染才能操作新生成的元素，这时候应该用$nextTick或者监听posts的变化来触发后续逻辑。

2. 轮播逻辑的错误 #

你写的var target = announcements.length % tcnt;逻辑是反的，应该是tcnt % announcements.length，这样才能循环获取0到length-1的索引。另外，display: 'initial'不是隐藏元素的正确写法，应该用display: 'none'来隐藏非当前项。

3. 更符合Vue理念的实现方式（推荐） #

Vue的核心是数据驱动，我们应该尽量避免直接操作DOM，而是把文章里的OL列表项提取成响应式数据，通过数据来控制每个项的显示状态。这样代码更清晰，也更易于维护。

修正后的代码示例 #

方案一：改进原DOM操作方式（解决异步时机问题） #

var tcnt = 0;
new Vue({
  el: '#app',
  data: {
    posts: []
  },
  created() {
    axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/categories/')
      .then((response) => {
        let categoryId = 0;
        response.data.forEach(function(category){
          if (category.slug == 'announcements') {
            categoryId = category.id;
            console.log('Category ID: ' + category.id);
          }
        });
        return categoryId;
      })
      .then((categoryId) => {
        console.log(categoryId);
        return axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/posts/', {
          params: {
            categories: categoryId,
            per_page: 1,
            status: 'publish'
          }
        });
      })
      .then((response) => {
        console.log(response.data);
        this.posts = response.data;
        // 数据更新后，等待DOM渲染完成再初始化轮播
        this.$nextTick(() => {
          this.initCarousel();
        });
      })
      .catch((error) => {
        console.log(error.message);
      })
  },
  methods: {
    initCarousel() {
      const announcements = document.querySelectorAll('.frame.ajax .ajax-body > ol > li');
      console.log(announcements.length);
      // 初始化：只显示第一个列表项，隐藏其他
      announcements.forEach((item, index) => {
        item.style.display = index === 0 ? 'block' : 'none';
      });
      // 启动轮播定时器
      setInterval(() => {
        tcnt++;
        const target = tcnt % announcements.length;
        announcements.forEach((item, index) => {
          item.style.display = index === target ? 'block' : 'none';
        });
      }, 1000);
    }
  }
});

方案二：数据驱动的Vue化实现（更推荐） #

这种方式我们把OL的列表项提取成响应式数据，完全通过Vue的指令控制显示，不需要直接操作DOM：

<div class="frame ajax annoucements">
  <h1 id="announcements-title" class="material ajax-title">Announcements<span class="title-this-week"></span></h1>
  <div id="app" class="ajax-body material">
    <!-- 不再用v-html，而是自己渲染列表 -->
    <ol v-if="carouselItems.length">
      <li v-for="(item, index) in carouselItems" :key="index" v-show="currentIndex === index">
        {{ item }}
      </li>
    </ol>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    posts: [],
    carouselItems: [],
    currentIndex: 0,
    carouselInterval: null
  },
  created() {
    axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/categories/')
      .then((response) => {
        let categoryId = 0;
        response.data.forEach(function(category){
          if (category.slug == 'announcements') {
            categoryId = category.id;
            console.log('Category ID: ' + category.id);
          }
        });
        return categoryId;
      })
      .then((categoryId) => {
        console.log(categoryId);
        return axios.get('http://www.just-a-wp-site.com/wp-json/wp/v2/posts/', {
          params: {
            categories: categoryId,
            per_page: 1,
            status: 'publish'
          }
        });
      })
      .then((response) => {
        this.posts = response.data;
        // 解析文章内容里的OL列表项
        const parser = new DOMParser();
        const doc = parser.parseFromString(this.posts[0].content.rendered, 'text/html');
        const liElements = doc.querySelectorAll('ol > li');
        this.carouselItems = Array.from(liElements).map(li => li.textContent.trim());
        // 启动轮播
        this.startCarousel();
      })
      .catch((error) => {
        console.log(error.message);
      })
  },
  methods: {
    startCarousel() {
      this.carouselInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.carouselItems.length;
      }, 1000);
    }
  },
  beforeDestroy() {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.carouselInterval) {
      clearInterval(this.carouselInterval);
    }
  }
});

关键改进点说明 #

• 异步DOM更新时机：用this.$nextTick确保在数据更新后、DOM渲染完成再执行轮播初始化；
• 轮播逻辑修正：把索引计算改成tcnt % announcements.length，并正确使用display: none隐藏非当前项；
• 数据驱动实现：解析HTML提取列表项数据，用Vue的v-for和v-show控制显示，完全符合Vue的响应式思想；
• 内存泄漏预防：在组件销毁时清除定时器，避免不必要的内存占用。

内容的提问来源于stack exchange，提问作者kychung