Значение данных Vue JS не меняется после назначения

Question

Я определила данные как это

data() {
    return {
        mdrender: '',
        markdown: ''
    };
},

И у меня есть эта функция:

methods: {
    interpretVars: function(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;
        });
    }
},

Теперь проблема в том, что значение данных markdown не принимает новое значение, в то время как переменная, которую я записываю в консоль interpreted, имеет правильное значение.

Я что-то не так делаю? Заранее спасибо за ответ.

Answer 1

Ваша проблема в использовании оператора function(). Таким образом, вы потеряете область, а this не будет отображаться в текущем экземпляре Vue. Есть два возможных решения, чтобы это исправить:

Использовать функцию стрелки :

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

Использовать вспомогательную переменную:

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

Answer 2

Полагаю, что лучший способ сделать это - это сделать так:

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 переменной temp.

Answer 3

Сохранить this переменную области видимости во временной переменной и использовать эту переменную.

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;
            });
        }
    },