Vue.js cannot change data value within a method

Question

Can anyone help me why I cannot be able to change the data value within a method?

    <head>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
    </head>
    <body>
    <script>
    var app = new Vue({
      data() {
        return {
          name: ""
        }
      },
    methods: {
      firebase: function() {
        var docRef = db.doc("test/testdoc");
        docRef.get().then(function(doc) {
          this.name = doc.data().name;    //this one not working
          console.log(doc.data().name);   //just to test wether I can get data from Firestore
        })
      }
    })
    </script>
    </body>

"console.log" is working and I can get the value from Firestore, but why the value of "name" doesn't change?

@JacobGoh I am sorry that I made the mistake in this post, the real code is name: "", not name = "" — alanko
– alanko, Commented Mar 30, 2018 at 9:28

yuriy636 · Accepted Answer · 2018-03-30 09:32:56Z

7

this will not be referring to the Vue instance anymore in function(){}, because this kind of function declaration bind its own this.

So you can save this into another variable 1st, and use it in function(){}.

methods: {
  firebase: function() {
    var docRef = db.doc("test/testdoc");
    var _this = this; // save it in a variable for usage inside function
    docRef.get().then(function(doc) {
        _this.name = doc.data().name;    //this one not working
      console.log(doc.data().name);   //just to test wether I can get data from Firestore
    })
  }
}

Alternatively, you could use arrow function like ()=>{}. Arrow function doesn't bind its own this. But it's not supported in some browsers yet.

edited Mar 30, 2018 at 9:32

yuriy636

11.7k6 gold badges39 silver badges43 bronze badges

answered Mar 30, 2018 at 9:26

Jacob Goh

20.9k5 gold badges58 silver badges75 bronze badges

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

Collectives™ on Stack Overflow

Vue.js cannot change data value within a method

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