如何在Axios接收响应后为Vue页面插入对应反馈内容？

我看了你的代码，核心问题是axios回调里的this指向不对，导致没法正确更新Vue实例的post数据。另外还有一些小细节可以优化，下面一步步给你修正：

问题分析 #

1. 在then和catch的普通函数里，this不再指向Vue实例，所以this.post = ...根本没法修改data里的变量
2. 你把post初始设为数组，但后面赋值的是字符串，类型不一致容易出问题
3. HTML里的v-if="post && post.length"对字符串来说虽然能工作，但逻辑可以更简洁

修正后的完整代码 #

HTML部分 #

<div class="col-md-4" id="app2">
  <div v-if="post">{{ post }}</div>
  <input class="form-control" type="text" v-model="message" placeholder="Enter Email..." />
  <button class="btn btn-secondary" type="submit" v-on:click="sendEmail">Subscribe!</button>
</div>

JS部分 #

var app2 = new Vue({
  el: '#app2',
  data: {
    message: null,
    post: '', // 改成字符串初始值，和后续赋值类型统一
  },
  methods: {
    sendEmail: function () {
      var bodyFormData = new FormData();
      bodyFormData.set('email', this.message);
      
      axios({
        method: 'post',
        url: '/api/subsc/',
        data: bodyFormData,
      })
      // 用箭头函数，让this继承外层的Vue实例
      .then((response) => {
        if (response.status === 201) {
          console.log(response);
          this.post = "Bla bla bla";
        }
      })
      // 同样用箭头函数
      .catch((error) => {
        this.post = error.response.data.email[0];
      });
    }
  }
})

关键修改点说明 #

• 箭头函数替代普通函数：在axios的then和catch里用箭头函数，这样this会指向外层的Vue实例，就能正确修改this.post了。如果你不想用箭头函数，也可以在sendEmail开头先保存const self = this，然后在回调里用self.post代替this.post。
• 统一post的类型：把data里的post初始值从数组改成空字符串，和后续赋值的字符串类型保持一致，避免不必要的类型判断问题。
• 简化v-if逻辑：直接用v-if="post"，因为空字符串、null、undefined都会被Vue视为假值，不会显示这个div；当post有内容时就自动显示。

这样修改后，当请求成功返回201状态码时，页面会显示"Bla bla bla"；请求失败时会显示后端返回的错误信息，完全符合你的需求。

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