[Vuejs]-Vue js data value is not changing after assign

by

1👍

✅

Your problem is the use of the function() statement. So you will loose the scope and this doesn’t represents to the current Vue instance. There are two possible solutions to fix this:

Use an arrow function:

methods: {
  interpretVars: function(markdown) {
    $.getJSON("/api/v1/getdoc?code=" + this.$route.query.code, (result) => {
      …
    });
  }
},

Use a helper variable:

methods: {
  interpretVars: function(markdown) {
    var $this = this;
    $.getJSON("/api/v1/getdoc?code=" + this.$route.query.code, function (result) {
      …
      $this.markdown = interpreted;
    });
  }
},

0👍

Store this scope variable to a temporary variable and use that variable.

methods: {
        interpretVars: function(markdown) {
            let that = this;
            $.getJSON("/api/v1/getdoc?code=" + this.$route.query.code, function (result) {
                var interpreted = markdown.replace(/\{\#(companyName)\#\}/g, 'Demo')
                    .replace(/\{\#(docType)\#\}/g, result[0].datas.category).replace(/\{\#(version)\#\}/g, result[0].datas.version)
                    .replace(/\{\#(docTitle)\#\}/g, result[0].datas.title);
                that.markdown = interpreted;
              console.log(interpreted, that.markdown);
              return interpreted;
            });
        }
    },

0👍

I guess the best way of doing this would be doing it like this :

methods: {
 async interpretVars(markdown) {
    $.getJSON("/api/v1/getdoc?code=" + this.$route.query.code, function (result) {
        var interpreted = markdown.replace(/\{\#(companyName)\#\}/g, 'Demo')
            .replace(/\{\#(docType)\#\}/g, result[0].datas.category).replace(/\{\#(version)\#\}/g, result[0].datas.version)
            .replace(/\{\#(docTitle)\#\}/g, result[0].datas.title);

      this.markdown = interpreted;
      console.log(interpreted);
      return interpreted;
    });
}

This should work as expected i guess, please don’t assign this to temp variable.

Leave a comment