Question

我有这个main.js文件来引导我的Vue应用程序。

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

var model = {
  a: 1,
  name: 'Abdullah'
}

var app = new Vue({
  el: '#app',
  data: model,
  router,
  template: '<App/>',
  components: {
    App
  },
  watch: {
    a: function(val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    }
  }
});

app.a = 23; //This triggers the watch function

在我的视图实例中，我正在观看数据a的任何更改。

a上的任何更改都应触发watch并写入控制台。通过在watch文件中更改a文件中main.js的值来触发此app.a=23;时，此watch可以正常工作，但是当我触发时它同样不起作用它来自浏览器控制台。

如果更改a，如何从浏览器的控制台触发VueJS？

PS：我刚开始使用<student> <name><h1>Abcd</h1></name> </student>。

Answer 1

这里有几个问题。

首先，您有div id app。所有浏览器都将具有id属性的HTML元素作为全局变量。因此，您有一个名为app的全局变量，它指向div id app。

其次，您在名为new Vue()的变量中捕获app的结果。但是，由于您非常清楚地使用构建系统（因为您正在使用import） app在全局范围内不可用，因为几乎所有构建系统都包含它们在闭包中编译了javascript。

您无法访问要更改的app结果，但看起来是因为在全局范围内有一个名为app的完全独立的变量。< / p>

如果您想要做您想做的事情，我建议您将脚本更改为：

window.myApp = new Vue(...)

然后您就可以进入控制台并输入

myApp.a = 23

看看你期望的结果。

触发VueJs $ watch从浏览器的控制台无法正常工作

1 个答案: