如何用axios的結(jié)果更新Vue列表？

現(xiàn)在有一個(gè)字符串和一個(gè)列表要用axios中取到的結(jié)果更新，更新列表的時(shí)候有幾個(gè)本地值要先顯示，然后axios取到的結(jié)果添加到列表的后面，我研究了大半天，只找到把更新函數(shù)全加到created鉤子中這么一種方法，請(qǐng)教一下大佬們是否有其他更好的辦法來(lái)更新數(shù)據(jù)。

<html>

<head>
    <title>index</title>
    <meta charset="utf8">
</head>

<body>
    <div id="app">
        <h1>{{greeting}}</h1>
        <ul>
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    greeting: '',
                    items: []
                }

            },
            computed: {

            },
            methods: {
                update_greeting: function () {
                    axios.get('https://httpbin.org/ip')
                        .then(resp => {
                            this.greeting = 'hello'
                            console.log('greeting updated')

                        })
                        .catch(err => console.error(err))
                },
                update_items: function () {
                    this.items = [1, 2, 3]
                    axios.get('https://httpbin.org/ip')
                        .then(resp => {
                            this.items.push(4)
                            console.log('items updated')

                        })
                        .catch(err => console.error(err))
                },
            },
            created: function () {
                this.update_greeting()
                this.update_items()
            }
        })
    </script>
</body>

</html>

我還試過(guò)一種逗比辦法是把初始值放到data中，然后在計(jì)算屬性中更新data，這樣雖然倒是可以更新，但是至少更新兩次，而且一不小心就死循環(huán)了，想來(lái)想去好像除了created鉤子外沒(méi)有什么好辦法。請(qǐng)問(wèn)大佬們?cè)谶@種情況下都是怎么做的？

回答

編輯回答

墨染殤

data() {} 中直接給 items 賦值為 [1,2,3] 不就好了？

2017年8月4日 17:58

編輯回答

傻叼

為什么要說(shuō)把值放到data里很逗比呢，原本就應(yīng)該這么初始化。

<html>

<head>
    <title>index</title>
    <meta charset="utf8">
</head>

<body>
    <div id="app">
        <h1>{{greeting}}</h1>
        <ul>
            <li v-for="item in items">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    greeting: 'normal',
                    items: [1, 2, 3]
                }

            },
            computed: {

            },
            methods: {
                update_greeting: function () {
                    axios.get('https://httpbin.org/ip')
                        .then(resp => {
                            this.greeting = 'hello'
                            console.log('greeting updated')

                        })
                        .catch(err => console.error(err))
                },
                update_items: function () {
                    axios.get('https://httpbin.org/ip')
                        .then(resp => {
                            this.items.push(4)
                            console.log('items updated')

                        })
                        .catch(err => console.error(err))
                },
            },
            created: function () {
                this.update_greeting()
                this.update_items()
            }
        })
    </script>
</body>

</html>

2018年4月8日 21:32

編輯回答