Question

当string ScrtCon = ConfigurationManager.ConnectionStrings["yourconnectionname"].ToString(); ScrtCon = string.Format(ScrtCon, "Server Name","Data base Name", "Database User Name", "Database password");被触发并且我在其中检查addTodo时，上下文是浏览器窗口，而不是this对象。所以data最终未被定义。

知道我缺少什么吗？

HTML：

todos

JS：

<div id="todo-list">
  <input type="text" v-model="newTodo">
  <button v-on:click="addTodo">Add</button>
  <ul>
    <li v-if="todos.length" v-for="todo in todos" class="todo-item">
      {{ todo }}
    </li>
  </ul>
</div>

Answer 1

看起来ES6箭头语法是你的问题。将其更改为使用传统的function（）语法，它将起作用：

＆＃13;

addTodo: function() {
  this.todos.push(this.newTodo);
  this.clearNewTodo();
},
clearNewTodo: function() {
  this.newTodo = '';
}

＆＃13;

Answer 2

快速修复：don't use arrow functions to declare your Vue methods.

问题是什么？

您期望ES6箭头函数() => {}语法将上下文（this）设置为与旧函数声明语法function () {}相同。

为什么会出现问题？

来自MDN：

在箭头函数之前，每个新函数都定义了它自己的这个值（在构造函数的情况下是一个新对象，在严格模式函数调用中是未定义的，如果函数被称为＆＃34，则是上下文对象;对象方法＆＃34 ;等）。事实证明，这是一种面向对象的编程风格。

因此，您的方法对象应该如下所示（使用旧函数语法）：

methods: {
    addTodo: function() {
      this.todos.push(this.newTodo);
      this.clearNewTodo();
    },
    clearNewTodo: function() {
      this.newTodo = '';
    }

}

或者这（使用new method definition syntax）

methods: {
    addTodo() {
      this.todos.push(this.newTodo);
      this.clearNewTodo();
    },
    clearNewTodo() {
      this.newTodo = '';
    }
  }

我现在还不知道Vue.js如何设置/处理上下文，但看起来你的方法是从你的模板/ DOM调用的，而且上下文正从那里传递到你的方法。由于箭头函数继承其上下文，this引用window对象。

使用实际函数声明将保留对所需this的正确引用。

Answer 3

你的箭头Vue方法已经将this对象作为第一个参数，所以：

methods: {
    addTodo: (_this) => {
      _this.todos.push(_this.newTodo);
      _this.clearNewTodo();
    },
    clearNewTodo: (_this) => {
      _this.newTodo = '';
    }
  }

可以解决问题，但我不确定箭头功能在这里有什么贡献。

为什么我的Vue方法不是指正确的上下文（数据）？

3 个答案: