首页 > 解决方案 > 硬刷新后显示数据

问题描述

我正在使用 vue 和 laravel。我有一个编辑个人资料页面,其中包含一些表单(名称、电子邮件、...)此表单的默认值第一次没有显示,但如果用户刷新页面,一切都会正常工作!!!

<template>
 <label>Name:</label>
 <input type="text" v-model="name">
 <label>Email:</label>
 <input type="email" v-model="email">
<template>

<script>
export default {
    data () {
        return {
            name:'',
            email:'',
        }
    },
    mounted : function(){
        this.getVueItems();
    },
     methods: {
        getVueItems: function(){
            axios.get('./api/auth/me').then(response => {
                var vm = this;
                vm.name = response.data.name;
                vm.email = response.data.email;
            });
        },

        getAuthUser () {
            this.user = this.$store.getters.currentUser
        },

        updateAuthUser () {
            this.submiting = true,
            axios.put('./api/auth/update', {
                name:this.name,
                email:this.email,
            })
            .then(response => {
                // this.submiting = false;
                location.reload(true);
                // success();
            })
            .catch(error => {
                this.submiting = false;
            })
        },
    }
}
</script>

有什么问题?

标签: laravelvue.js

解决方案


当您使用箭头函数时,该关键字已经可以在函数内部访问。为此,如果您从控制台中的 api 获得正确的响应值,您应该首先检查控制台。因此,如下更改您的功能并检查一次。

 async getVueItems() {
  await axios.get('./api/auth/me').then(response => {
      console.log(response);
      this.name = response.data.name;
      this.email = response.data.email;
  });

推荐阅读