Javascript 使用axios修改vue.js中的数据变量_Javascript_Html_Vuejs2

Javascript 使用axios修改vue.js中的数据变量

javascript html vuejs2

Javascript 使用axios修改vue.js中的数据变量,javascript,html,vuejs2,Javascript,Html,Vuejs2,这是我的剧本： <html> <script src="https://unpkg.com/vue"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js"></script> <body> <div id="app-3">

这是我的剧本：

<html>

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js"></script>

<body>


    <div id="app-3">
        <span v-if="seen">{{ textFromApi }}</span>
    </div>
    <br/>


    <script type="text/javascript"> 
        var app3 = new Vue({
            el: '#app-3',
            data: {
                seen: true,
                textFromApi: "hello"
            },
            methods: {
                getData() {
                    return axios.get('https://jsonplaceholder.typicode.com/posts/1')
                },
            },
            created: function () {
                this.textFromApi = this.getData();
            }
        })
    </script>
</body>
</html>


{{textFromApi}}


var app3=新的Vue({
el:“#app-3”，
数据：{
看到了：是的，
textFromApi：“你好”
},
方法：{
getData（）{
返回axios.get（'https://jsonplaceholder.typicode.com/posts/1')
},
},
已创建：函数（）{
this.textFromApi=this.getData（）；
}
})

我正试图通过调用此api来修改

this.textFromApi

：

但是我的

this.textFromApi

似乎没有更新，你知道为什么吗

下面是一个小提琴代码：

根据下面的评论编辑

问候并感谢

是一个，它应该与数据、方法、计算等处于同一级别。而不是方法的子级（因此，如果在方法（）中嵌套created（），除非调用该方法，否则将永远不会执行它）

您也不会对axios承诺做任何事情，您应该使用

then（）

来处理它


{{textFromApi}}


var app3=新的Vue({
el:“#app-3”，
数据（）{
返回{
看到了：是的，
textFromApi:{title:'empty'}
}
},
方法：{
getData（）{
返回axios.get（'https://jsonplaceholder.typicode.com/posts/1）。然后（响应=>{
this.textFromApi=response.data
})
},
},
已创建：函数（）{
这是getData（）；
}
})

如果我没有错，仍然无法工作：并且经过编辑，但htanksAxios需要这样一个承诺：我还更新了我的答案以包含承诺。

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.0/axios.js"></script>
<body>


    <div id="app-3">
        <span v-if="seen">{{ textFromApi }}</span>
    </div>
    <br/>


    <script type="text/javascript"> 
        var app3 = new Vue({
        el: '#app-3',
        data () {
                return {
                    seen: true,
                    textFromApi: { title: 'empty'}
            }
        },
        methods: {
            getData() {
                return axios.get('https://jsonplaceholder.typicode.com/posts/1').then(response => {
                   this.textFromApi = response.data
                })
            },
        },
        created: function () {
            this.getData();
        }
    })
    </script>
</body>

</html>