Javascript Axios get请求在Vue中刷新页面后给出响应

我在agent.vue文件中有以下代码。我正在通过axios get请求获取代理。但我在这里面临的问题是get请求在第一次时不起作用。我必须刷新页面才能找到代理。有没有办法解决这个问题

<template>
 <p>{{agent.fname}}</p>
 <p>{{agent.lname}}</p>
</template>

<script>

export default {
  data () {
    return {
      agent: {
        fname: '',
        lname: '',
      }, 
    }
  },
  created() {
    this.fetchAgent();
  },
  methods: {
    fetchAgent() {
      this.$axios.get('/organisation/agent.json')
      .then(response => {
        this.agent = response.data;
      })
    }
  }
}
</script>

{{agent.fname}

{{agent.lname}

导出默认值{
数据（）{
返回{
代理人：{
fname:“”，
lname:“”，
}, 
}
},
创建（）{
这是fetchAgent（）；
},
方法：{
fetchAgent（）{
这是.$axios.get（'/organization/agent.json'））
。然后（响应=>{
this.agent=response.data；
})
}
}
}

它触发API调用以获取

created（）生命周期钩子中的数据

除了@Lawrence Cherone所说的之外，您的代码应该可以工作。我觉得你没有复制你真正的问题。否则，请尝试：

<template>
  <div>
    <p v-if="agent.fname"> {{ agent.fname }} </p>
    <p v-if="agent.lname"> {{ agent.lname }} </p>
  </div>
</template>


{{agent.fname}
{{agent.lname}
尝试安装挂钩，而不是created@fullmetal我试过了。同样的问题在模板中应该只有一个元素