使用 axios 修改 vue.js 中的數據變量

Question

這是我的腳本：

<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>

我正在嘗試通過調用此 api 來修改this.textFromApi ： https ://jsonplaceholder.typicode.com/posts/1

但我的this.textFromApi似乎沒有更新，有什么想法嗎？

這是一個小提琴代碼： https ://jsfiddle.net/bussiere/5t3v013o/

從下面的評論編輯

問候和感謝

Answer 1

created()是一個生命周期鈎子，它應該與數據、方法、計算等處於同一級別。不是方法的子級（因此，如果您將 created() 嵌套在 methods() 中，除非您調用該方法，否則它將永遠不會被執行）。

您也不會對 axios 承諾做任何事情，您應該使用then ()來處理它。

<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>

使用 axios 修改 vue.js 中的數據變量

問題描述

1 個解決方案

解決方案1
1 已采納 2017-10-23 14:53:06

使用 axios 修改 vue.js 中的數據變量

問題描述

1 個解決方案

解決方案1 1 已采納 2017-10-23 14:53:06

解決方案1
1 已采納 2017-10-23 14:53:06