Javascript 试图从服务器获取变量时变量未定义

当我试图从我的对象获取值时，我收到了一个奇怪的警告。我得到的值是JSON格式的。我想知道这里有什么问题，我的代码有什么问题。为什么我的变量没有定义

我的模板代码：

<template>
    <textarea id="terms" v-model="terms.value" name="terms" type="text" rows="20"></textarea>
        <button class="btn waves-effect waves-light " v-on:click="updateUserProfile">Update Profile</button>
</template>


    <script>
    import firebase from 'firebase'
    import axios from 'axios'
    export default {

        data: function() {
            return {
              id: '',
              email: '',
              terms: {},

            }
        },
        methods: {
            getUserProfile: function() {
                var accessToken;
                var self = this;
                    var config = {
                      headers: {'Authorization': 'Bearer ' + accessToken}
                    };
                    axios.get('https://api-link/', config).
                    then(response => {
                        console.log("Response on GET OK: " + response)
                        self.id = response.data.id
                        self.terms = response.data.terms

                    })
                    .catch(e => {
                      console.log("Error on GET: " + e)
                    });
                }).catch(function(error) {
                    console.log("Error on getting token: " + error)
                });
            },
            updateUserProfile: function() {
              var accessToken;
                var self = this;
                var config = {
                  headers: {'Authorization': 'Bearer ' + accessToken}
                };
                axios.put('https://api-link/',
                { 
                  terms: self.terms
                }, config).
                then(response => {
                    console.log("Response on PUT: " + response)
                    self.email = response.data.email
                    self.id = response.data.id
                    self.userType = response.data.user_type
                    self.terms = response.data.terms
                })
                .catch(e => {
                  console.log("Error on PUT: " + e)
                });

            },
        },
        mounted() {
            this.getUserProfile()
        },
    }
    </script>

更新配置文件
从“firebase”导入firebase
从“axios”导入axios
导出默认值{
数据：函数（）{
返回{
id:“”，
电子邮件：“”，
条款：{}，
}
},
方法：{
getUserProfile:function（）{
var-accessToken；
var self=这个；
变量配置={
标头：{'Authorization'：'Bearer'+accessToken}
};
axios.get（）https://api-link/，配置）。
然后（响应=>{
log（“获取OK时的响应：+响应”）
self.id=response.data.id
self.terms=response.data.terms
})
.catch（e=>{
log（“获取时出错：+e”）
});
}).catch（函数（错误）{
log（“获取令牌时出错：+错误）
});
},
updateUserProfile:函数（）{
var-accessToken；
var self=这个；
变量配置={
标头：{'Authorization'：'Bearer'+accessToken}
};
轴心https://api-link/',
{ 
术语：self.terms
}，config）。
然后（响应=>{
log（“放置时的响应：”+响应）
self.email=response.data.email
self.id=response.data.id
self.userType=response.data.user\u type
self.terms=response.data.terms
})
.catch（e=>{
log（“PUT时出错：+e）
});
},
},
安装的（）{
this.getUserProfile（）
},
}

下面是我的控制台截图，如果您需要更多信息，请发表评论。 真的很感谢你的帮助，因为我被困在这里好几个小时了。还有，我是VueJS的新手

---

首先检查您的响应是否未定义，如果未定义，则可以将响应数据分配给变量： 把这个放到你的GET中，我想这会删除警告/错误

if (response.data.terms !== undefined) {
    self.terms = response.data.terms
}

---

问题出在哪一行代码上？我认为是在获取术语值上，在我的getUserProfile（）上，一个问题是模板中有两个根元素。您需要在一些包含标记（如

div

）中包含

textarea

和

按钮

。以下是您的代码清理（您的组件位于App.vue中）。我看到您添加了

v-if=“terms”

，如果有值就会显示出来，但是我需要相同的输入来更新，或者如果用户不想设置术语，它将是空的