How to update the Vue list with the results of axios?

now there is a string and a list to be updated with the results obtained in axios. When updating the list, there are several local values to be displayed first, and then the results obtained by axios are added to the back of the list. I have studied for most of the day and only found such a way to add the update function to the created hook. Ask the bosses if there are other better ways to update the data.

</script>
    <script>
        let vm = new Vue({
            el: "-sharpapp",
            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>

I have also tried a comma method to put the initial value in data, and then update data, in the calculation properties so that although it can be updated, it can be updated at least twice, and it will end up in an endless loop. It seems that there is no good way to do this except the created hook. What do the bosses do in this situation?

Mar.28,2021
The

data () {} directly assigns items to [1 Magi 2 Magi 3] .


I also deal with this, putting the execution function in created, I think this method is good, you can use async and await, so the effect will be better. You can put the request in a separate api file, and then introduce those two functions to make it easy to manage


Why is it funny to put the value in data? it should be initialized in the first place.

<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: '-sharpapp',
            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>
Menu