Vue.js: how do you set a data variable in a vue method inside a .vue template file

Question

I am learning vue.js for the first time tonight and I can't wrap my head around why when I set a "list" array in the data function, i cannot change it in a method below. I have the following code and my template still spits out my original {name: 'daniel'}, {name: 'lorie'} variable.

My http call is definitely being made as i can see an array of like 100 users in the network tab, but "this.list = data" is not resetting my data variable

<template>
  <pre>{{list}}</pre>
</template>

<script>
export default {
  data () {
    return {
      list: [{name: 'daniel'}, {name: 'lorie'}]
    }
  },
  created () {
    this.fetchContactList()
  },
  methods: {
    fetchContactList () {
      this.$http.get('https://jsonplaceholder.typicode.com/users', (data) => {
        this.list = data
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  ul.user-list {
    background: #fafafa;
    border:1px solid #ebebeb;
    padding:40px;
    li {
      list-style: none;
      display: block;
      margin-bottom:10px;
      padding-bottom:10px;
      border-bottom:1px solid #ebebeb;
    }
  }
</style>

wanyama_man · Accepted Answer · 2016-10-11 09:13:44Z

1

You are attempting to pass your success callback in the options argument. The $http service uses promises with the following format:

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

Change your get request to this:

this.$http.get('https://jsonplaceholder.typicode.com/users').then( (response) => {
    this.list = response.body; // The data you want is in the body
  });

answered Oct 11, 2016 at 9:13

wanyama_man

4764 silver badges5 bronze badges

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

Collectives™ on Stack Overflow

Vue.js: how do you set a data variable in a vue method inside a .vue template file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related