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实例。有两种解决方案可以解决此问题：

使用arrow function：

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

将const path = require('path'); const config = { entry: './lib/components/index.js', output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js' }, module: { rules: [ {test: /\.(js)$/, use: ['babel-loader']} ] } }; module.exports = config;作用域变量存储到一个临时变量中并使用该变量。

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\learnings\advanced-react\node_modules\babel-loader\lib\index.js:10:11)
    at Module._compile (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at loadLoader (D:\learnings\advanced-react\node_modules\loader-runner\lib\loadLoader.js:18:17)
    at iteratePitchingLoaders (D:\learnings\advanced-react\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (D:\learnings\advanced-react\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
    at NormalModule.doBuild (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModule.js:280:3)
    at NormalModule.build (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModule.js:427:15)
    at Compilation.buildModule (D:\learnings\advanced-react\node_modules\webpack\lib\Compilation.js:635:10)
    at moduleFactory.create (D:\learnings\advanced-react\node_modules\webpack\lib\Compilation.js:1021:12)
    at factory (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:405:6)
    at hooks.afterResolve.callAsync (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (D:\learnings\advanced-react\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesWaterfallHook.lazyCompileHook (D:\learnings\advanced-react\node_modules\tapable\lib\Hook.js:154:20)
    at resolver (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
    at process.nextTick (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:342:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
    at eval (webpack-internal:///./lib/components/index.js:1:7)
    at Object../lib/components/index.js (http://localhost:8080/bundle.js:96:1)
    at __webpack_require__ (http://localhost:8080/bundle.js:20:30)
    at http://localhost:8080/bundle.js:84:18
    at http://localhost:8080/bundle.js:87:10

Answer 3

我想做到这一点的最好方法就是这样做：

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分配给临时变量。

分配后Vue JS数据值未更改

3 个答案: