Vue.js方法内变量未定义报错：ReferenceError: sendData is not defined

嘿，这个问题其实挺常见的，就是个变量声明的小疏忽导致的～

错误原因 #

你在submit方法里直接给sendData赋值，但没加let、const或者var来声明这个变量。Vue默认启用了严格模式，在严格模式下，未声明的变量直接赋值会抛出ReferenceError，浏览器会认为你在引用一个压根不存在的变量。

几种修复方案 #

方案1：显式声明变量

用const（推荐，因为这个对象不会被重新赋值）或者let声明sendData，就能解决未定义的问题：

methods: {
  submit() {
    const sendData = {
      name: this.name,
      password: this.password,
      email: this.email
    }
    axios.post('http://localhost:8000/api/users', sendData)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error)
      })
  }
}

方案2：直接传入对象，省略中间变量

如果这个对象只在axios请求里用一次，完全可以不用额外变量，直接把对象写进post方法的参数里，代码更简洁：

methods: {
  submit() {
    axios.post('http://localhost:8000/api/users', {
      name: this.name,
      password: this.password,
      email: this.email
    })
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error)
      })
  }
}

方案3：用对象解构简化代码

如果你的data里的属性名和请求需要的参数名完全一致，还可以用ES6的对象解构来简化写法，少写重复代码：

methods: {
  submit() {
    // 从this中解构出需要的属性，直接组装成请求对象
    const { name, password, email } = this;
    const sendData = { name, password, email };

    axios.post('http://localhost:8000/api/users', sendData)
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error)
      })
  }
}

要是你的data里只有这三个属性，甚至可以直接用const sendData = { ...this.$data };来快速复制所有data属性。

小提醒 #

在JavaScript里，一定要养成声明变量再使用的习惯，尤其是在Vue、React这类默认开启严格模式的框架里，隐式全局变量不仅会导致错误，还可能带来意想不到的全局污染问题。

内容的提问来源于stack exchange，提问作者cantdocpp