axios 调用带有 vuejs 和 nuxt 的方法

Question

对于我的国家/地区列表中的每个国家/地区，我需要使用 axios 进行 api 调用以获得另一个值，这里是 y 组件：

<template>
  <div>
    <div v-for="(country, i) in countries" :key="i">
      <div>{{ county[i.id].count }}</div>
    </div>
  </div>
</template>

在我的脚本中，我在 mount 上调用我的方法 matchCount 并将值存储在我的县数据对象中：

<script>
export default {
  props: {
   countries: {
    type: Array,
    required: true
    }
  },
 data() {
  return {
    county = {}
  };
 },
 mounted() {
  this.matchCount();
 },
 methods: {
   matchCount() {
     var paysCount = this.pays;
     paysCount.forEach(item => {
       this.$axios
        .get(
          `https://api.com/federation/}/${item.id}/`
        )
        .then(response => {
          this.county[item.id] = {};
          this.county[item.id].count = response.data.length.toString();
        });
     });
   }
  }
};
</script>

我收到这个错误“TypeError: Cannot read property 'count' of undefined”，我应该如何调用这个方法？

Answer 1

您会发现在您的 HTML 模板中使用以下语法很有用 {{variable[key] && variable[key].value}}。

在您的特定情况下，它将是：

<template>
  <div>
    <div v-for="(country, i) in countries" :key="i">
      <div>{{ county[i.id] && county[i.id].count }}</div>
    </div>
  </div>
</template>

它的作用本质上是验证i.id 是否存在于county 数组中。如果没有，它不会抛出关于丢失对象/键的错误。

您也可以在使用对象时使用此语法，如下所示：

<div v-text="house.dog && house.dog.name" ></div>

如果dog 在house 对象中，那么它将显示dog's 名称。

编辑：

在函数中添加this.$forceUpdate();：

matchCount() {
 var paysCount = this.pays;
 paysCount.forEach(item => {
   this.$axios
    .get(
      `https://api.com/federation/}/${item.id}/`
    )
    .then(response => {
      this.county[item.id] = {};
      this.county[item.id].count = response.data.length.toString();
      this.$forceUpdate();
    });
 });
}

Answer 2

county[item.id].count 是异步设置的，在渲染组件时可能不可用。您可以添加安全检查：

<template>
  <div>
    <div v-for="(country, i) in countries" :key="i">
      <div v-if="county[i.id]">{{ county[i.id].count }}</div>
      <div v-else>Loading...</div>
    </div>
  </div>
</template>

你好像有reactivity problem:

this.$axios
    .get(
      `https://api.com/federation/}/${item.id}/`
    )
    .then(response => {
      this.$set(this.county, item.id, {count: response.data.length.toString())
    });