尝试从服务器获取变量时未定义变量答案

【问题标题】：Variable is undefined while trying to GET it from server尝试从服务器获取变量时未定义变量
【发布时间】：2017-10-07 13:32:46
【问题描述】：

当我尝试从我的对象中获取值时，我收到了一个奇怪的警告。我得到的值是 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>

以下是我的控制台截图，如果您需要更多信息，请发表评论。非常感谢您的帮助，因为我被困在这里几个小时。还要提一下我是 VueJS 的新手

【问题讨论】：

哪一行代码有问题？
我认为这是在获取条款价值，在我的 getUserProfile()
一个问题是您的模板中有两个根元素。您需要在一些包含标签中包含textarea 和button，例如div。
这里是你的代码清理了一下（你的组件在 App.vue 中）。 codesandbox.io/s/jv5365839y
我看到你添加了v-if="terms"，如果有值就会显示，但是我需要相同的输入来更新或者如果用户不想设置术语，它将为空

标签： javascript vue.js

【解决方案1】：

首先检查您的响应是否未定义，如果没有，那么您可以将响应数据分配给您的变量：把它放在你的 GET 中，我认为这将消除警告/错误。

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

【讨论】：