Vue3点击按钮触发整页刷新问题排查（后端为Django）

1. 检查后端响应是否触发跳转 #

如果Django后端的视图在处理PUT请求后返回了**重定向（3xx状态码）**响应，浏览器会自动执行整页刷新。打开浏览器开发者工具的「网络」面板，查看/api/v1/voteitem/${id}/请求的响应：

• 若状态码为301/302且响应头包含Location字段，说明后端主动触发了跳转，需修改Django视图，确保返回200状态的JSON响应而非重定向。

2. 修正前端代码的笔误 #

你的代码中存在明显错误：console.console.log(error) 应改为 console.log(error)。这个笔误会导致catch块执行失败，掩盖真实错误信息，同时中断后续逻辑。修正后可在控制台查看请求的具体报错，辅助定位问题。

3. 排查表单的潜在提交行为 #

虽然你添加了@submit.prevent=""和type="button"，但可以直接移除表单标签——你的按钮仅需触发异步请求，不需要提交表单。多余的表单标签可能在部分浏览器环境下产生意外行为，移除后测试是否仍会刷新。

4. 确认响应式数据更新逻辑 #

Vue3中只有声明在data()（选项式API）或用ref()/reactive()（组合式API）创建的变量才具备响应性：

• 检查list是否为响应式数据，且getlatestitems()方法是否正确更新了list的内容；
• 确认getlatestitems()内部没有window.location.reload()这类触发页面刷新的代码，需改用Vue的响应式更新逻辑。

5. 检查Axios全局配置 #

若你的Axios全局配置中添加了响应拦截器，且拦截器在处理错误时触发了页面刷新，也会导致该问题。检查全局Axios配置，确保无类似window.location.reload()的逻辑。

修正后的代码示例 #

<template>
  <section>
    <div class="container py-5">
      <div class="row">
        <div v-for="item in list" :key="item.id" class="col-md-8 col-xl-6 text-center mx-auto ">
          <p class="fw-bold text-success mb-2">{{ item.name }}</p>
          <h3 class="fw-bold">{{ item.age }}</h3>{{ item.vote }}
          <!-- 移除不必要的表单标签 -->
          <button class="btn" type="button" @click="onClickButtonYes(item.id)">+</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      latest: null
    }
  },
  methods: {
    async getlatestitems() {
      // 确保此处逻辑正确更新this.list
    },
    async onClickButtonYes(id) {
      const fd = new FormData();
      fd.append("id", id);
      fd.append("isvoted", true);
      try {
        const response = await axios.put(`/api/v1/voteitem/${id}/`, fd);
        this.latest = response.data;
        this.getlatestitems();
      } catch (error) {
        console.log(error); // 修正笔误
      }
    }
  }
}
</script>

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