Vue中Axios加载storiesData后组件数据渲染异常求助

问题详情 #

在Vue项目中，通过mounted钩子调用getStories方法，使用Axios请求/stories接口并将返回数据赋值给data中的storiesData。点击按钮触发openUserStories方法后，<Stories>与<Story>组件加载不完整，数据未正常渲染；但将接口返回数据转为JS对象直接写入Vue文件时，组件却能正常工作。Vue DevTools显示两种方式的数据完全一致，无法定位问题原因。

相关代码 #

按钮代码 #

<a
  href="#"
  v-for="(userStories, userStoriesIndex) in storiesData"
  :key="userStoriesIndex"
  @click="openUserStories(userStoriesIndex)"
>

组件渲染代码 #

<Stories v-for="(userStories, userStoriesIndex) in storiesData" 
  :key="userStoriesIndex"
>
  <Story v-for="(story, storyIndex) in userStories.stories" 
    :key="storyIndex"
    user-link="#"
    :name="userStories.model.name"
    :date="story.created_at"
    close-button
    @closeButtonClick="onCloseButtonClick"
  >
    <template #avatar>
       <img :src="userStories.model.profile_photo_path" />
    </template>
    <img :src="story.media.preview_url" />
  </Story>
</Stories>

数据获取方法 #

getStories() {
  axios
    .get("/stories")
    .then((response) => (this.storiesData = response.data));
}

数据定义 #

data() {
  return {
    storiesData: [],
  }
}

可能的解决方案 #

• 修复响应式追踪问题：Axios返回的对象可能存在深层属性未被Vue响应式监听的情况，可通过重新创建数组/对象触发响应式更新：

  getStories() {
    axios.get("/stories")
      .then((response) => {
        // 方式1：展开运算符重新创建数组
        this.storiesData = [...response.data];
        // 方式2：序列化后反序列化，强制创建新对象（适合深层嵌套数据）
        // this.storiesData = JSON.parse(JSON.stringify(response.data));
      });
  }
  

• 确保组件渲染时机：在<Stories>组件上添加v-if，确保数据加载完成后再渲染组件：

  <Stories 
    v-for="(userStories, userStoriesIndex) in storiesData" 
    :key="userStories.model.id"
    v-if="storiesData.length > 0"
  >
    <!-- 内部代码保持不变 -->
  </Stories>
  

• 替换v-for的key值：避免使用索引作为key，改用数据中的唯一标识（如用户ID、故事ID），确保Vue能正确识别组件更新：

  <!-- 按钮部分 -->
  <a
    href="#"
    v-for="(userStories) in storiesData"
    :key="userStories.model.id"
    @click="openUserStories(userStoriesIndex)"
  >
  
  <!-- 组件部分 -->
  <Stories v-for="(userStories) in storiesData" 
    :key="userStories.model.id"
  >
    <Story v-for="(story) in userStories.stories" 
      :key="story.id"
      <!-- 其他属性保持不变 -->
    >
      <!-- 内部代码保持不变 -->
    </Story>
  </Stories>
  

• 子组件监听props变化：如果子组件依赖props初始化数据但未监听更新，添加watch监听props变化：

  // Story组件示例
  export default {
    props: ['name', 'date'],
    watch: {
      name(newVal) {
        // 处理name更新后的逻辑
      },
      date(newVal) {
        // 处理date更新后的逻辑
      }
    }
  }
  

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