modifying data variable in vue.js using axios

Question

Here is my script :

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

I'm trying to modify this.textFromApi from the call of this api: https://jsonplaceholder.typicode.com/posts/1

but my this.textFromApi doesn't seems to update, any ideas why?

Here is a fiddle code: https://jsfiddle.net/bussiere/5t3v013o/

Edited from remark just below

Regards and thanks

tony19 · Accepted Answer · 2022-07-16 01:58:15Z

1

created() is a lifecycle hook, it should be at the same level as data, methods, computed etc. Not a child of methods (so if you nest created() in methods() it will never get executed unless you call the method).

You also don't do anything with the axios promise, you should process it using 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>

edited Jul 16, 2022 at 1:58

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 23, 2017 at 14:53

Wouter Vandevelde

9049 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bussiere Over a year ago

if i'am not wrong still not working : jsfiddle.net/bussiere/5t3v013o and edited but htanks

Wouter Vandevelde Over a year ago

Axios needs a promise like this: jsfiddle.net/5t3v013o/1 I also updated my answer to include the promise.

Collectives™ on Stack Overflow

modifying data variable in vue.js using axios

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related