Question

在我的项目中，我有这样的结构：客户端页面，其中包含侧栏，一般客户端的信息和子视图的路由器视图。

路线：

{ path: '/clients/:id', component: Client,
    children: [
      {
        path: '/',
        component: ClientReview,
        name: 'client-review'
      },
      {
        path: 'balances',
        component: ClientBalances,
        name: 'client-balances'
      },
      {
        path: 'report',
        component: MainReport,
        name: 'client-report'
      },

客户端组件（Client.vue）：

<template>
  <el-row>
    <client-menu></client-menu>
    <el-col class="client-view" :md="{ span: 22, offset: 2}" :sm="{ span: 20, offset: 4}" :xs="{ span: 18, offset: 6}">
      <client-bar></client-bar>
      <transition name="el-zoom-in-center">
        <router-view></router-view>
      </transition>
    </el-col>
  </el-row>
</template>

<script>
import ClientMenu from './ClientMenu.vue'
import ClientBar from './ClientBar.vue'

export default {
  data () {
    return {
      loading: false,
    };
  },
  components: {
    'client-menu': ClientMenu,
    'client-bar': ClientBar,
  }

}
</script>

ClientBar组件（ClientBar.vue）：

<template>
  <div class="client-bar">
    <el-col :span="18">
      <h3>{{ client.Name }}</h3>
      <h4>{{ client.Address }}</h4>
    </el-col>
    <el-col :span="6" style="text-align: right;">
      <el-button-group>
        <el-button icon="edit" size="small"></el-button>
        <el-button icon="share" size="small"></el-button>
      </el-button-group>
    </el-col>
    <div class="clrfx"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      client: {}
    }
  },
  mounted () {
    this.loadClient()
  },
  methods: {
    loadClient: function() {
      self = this;
      this.axios.get('http://127.0.0.1:8020/clients/'+self.$route.params.id)
        .then(function(response) {
          self.client = response.data;
          self.loading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    }
  }
</script>

我有ClientReview组件，它是clients /：id route的根组件，并使用相同的api将客户端信息加载为ClientBar：

<template>
  <div>
    <el-row v-loading.body="loading">
      <el-col :span="12">
        <table class="el-table striped">
          <tr>
            <td class="cell">Полное наименование</td>
            <td class="cell">{{ clientInfo.FullName }}</td>
          </tr>
          <tr>
            <td class="cell">УНП</td>
            <td class="cell">{{ clientInfo.UNP }}</td>
          </tr>
          <tr>
            <td class="cell">ОКЭД</td>
            <td class="cell">{{ clientInfo.Branch.code }}<br>{{ clientInfo.Branch.name }}</td>
          </tr>
          <tr>
            <td class="cell">Адрес</td>
            <td class="cell">{{ clientInfo.Address }}</td>
          </tr>
          <tr>
            <td class="cell">Аналитик</td>
            <td class="cell">{{ clientInfo.Analytic.first_name }} {{ clientInfo.Analytic.last_name }}</td>
          </tr>
          <tr>
            <td class="cell">Менеджер</td>
            <td class="cell">{{ clientInfo.Manager.first_name }} {{ clientInfo.Manager.last_name }}</td>
          </tr>
        </table>
      </el-col>
      <el-col :span="12">
        <classification-report></classification-report>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ClassificationReport from '../reports/ClassificationReport.vue'

export default {
  data () {
    return {
      loading: false,
      clientInfo: {}
    }
  },
  created () {
    this.Client();
  },
  methods: {
    Client: function() {
      self = this;
      self.loading = true;
      self.axios.get('http://127.0.0.1:8020/clients/'+self.$route.params.id)
        .then(function(response) {
          self.clientInfo = response.data;
          self.loading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  components: {
    'classification-report': ClassificationReport
  }
}
</script>

问题是我第一次加载页面client /：id或刷新ClientReview中的页面客户端数据时没有加载。呈现组件（正如我在Vue Devtools中看到的那样），并且发送了对服务器的两个请求，但ClientReview中的clientInfo对象仍为空。比如我去余额或报告页面，然后去客户评论页面，一切都被加载。希望有人能帮助我。

Answer 1

这是因为self碰巧是对window对象的另一个引用，并且在所有模块中都可用。

让我们走一步，看看为什么会发生这个错误。

您加载client:/id。
created中的ClientReview方法执行ajax请求，并将self分配给this。
mounted中的ClientBar方法执行ajax请求，重新将self分配给this。请注意，这也更改了self中的ClientReview变量引用。
ClientReview ajax完成并指定self.clientInfo = response.data;。由于self是对ClientBar的引用，而ClientBar未将clientInfo声明为根数据属性，因此此分配不执行任何操作。
ClientBar ajax完成并指定self.client = response.data;，这有效。
您离开ClientReview。
您返回ClientReview。重复步骤2.
ClientReview已成功呈现，因为ClientBar已呈现，并且未重新分配self。

答案是let self = this代替self = this。

使用var，let或const的课程始终声明您的变量。

Vue - axios - 处理相同的请求

1 个答案: