无法使用 "this" 设置未定义的 属性 'currentStatus'

Question

我想在 vue js 中显示 formSubmit 的状态。问题是我不太熟悉使用 "this"，现在我在尝试使用 "this.currentStatus".

声明状态时在代码中的某些地方出现错误

这是我的代码：

  const STATUS_INITIAL = 0
  const STATUS_SAVING = 1
  const STATUS_SUCCESS = 2
  const STATUS_FAILED = 3
 export default {
    name: 'Dashboard',
    data () {
      return {
        file: '',
        uploadError: null,
        currentStatus: null,
        uploadFieldName: 'photos'
      }
    },
    computed: {
      clientId () {
        return parseInt(this.$route.params.id)
      },
      isInitial () {
        return this.currentStatus === STATUS_INITIAL
      },
      isSaving () {
        return this.currentStatus === STATUS_SAVING
      },
      isSuccess () {
        return this.currentStatus === STATUS_SUCCESS
      },
      isFailed () {
        return this.currentStatus === STATUS_FAILED
      }
    },
    methods: {
      handleFileUpload () {
        this.file = this.$refs.file.files[0]
        console.log(this.file)
      },
      filesChange (fieldName, fileList) {
        // handle file changes
        const formData = new FormData()

        // append the files to FormData
        Array
          .from(Array(fileList.length).keys())
          .map(x => {
            formData.append(fieldName, fileList[x], fileList[x].name)
          })

        // save it
        this.submitFile(formData)
      },
      submitFile (formData) {
        this.currentStatus = STATUS_SAVING
        console.log(this.currentStatus)
        var clientId = this.clientId
        var reader = new FileReader()
        reader.readAsDataURL(this.file)
        reader.onload = function () {
          var asim = reader.result
          formData.append('file', this.file)
          let promises = []
          promises.push(
            performRpcWithPromise('insertContract', [
              asim, clientId
            ]).then(function (res) {
              console.log(res)
              this.currentStatus = STATUS_SUCCESS
              console.log(this.currentStatus)
            })
          )
        }
      }
    }
  }

这是我的表格：

<p v-if="isSuccess">
              DONE
            </p>
            {{currentStatus}}
            <form enctype="multipart/form-data" novalidate>
            <input type="file" placeholder="Velg en fil" id="file" ref="file" v-on:change="handleFileUpload()"
                   accept="application/pdf" class="input-file" @change="filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length">
              <p v-if="isSuccess">
                wow
              </p>
              <p v-if="isSaving">
              Uploading {{ fileCount }} files...
            </p>
            </form>

I followed this guide The error i am getting is this line: (inside the promise)

this.currentStatus = STATUS_SUCCESS

这对我来说有点奇怪，因为 this.currentStatus = STATUS_SAVING 正在工作并显示数字“1”，但不在承诺 (.then) 内。

任何人都可以看出为什么这在 promise 内部不起作用但在 promise 外部起作用？

Answer 1

你可以使用箭头函数或闭包：

var self = this
reader.onload = function () {
  var asim = reader.result
  formData.append('file', self.file)
  let promises = []
  promises.push(
    performRpcWithPromise('insertContract', [
      asim, clientId
    ]).then(function (res) {
      console.log(res)
      self.currentStatus = STATUS_SUCCESS
      console.log(self.currentStatus)
    })
  )
}

如果您想使用箭头功能，请尝试

reader.onload = () => {
  var asim = reader.result
  formData.append('file', this.file)
  let promises = []
  promises.push(
    performRpcWithPromise('insertContract', [
      asim, clientId
    ]).then((res) => {
      console.log(res)
      this.currentStatus = STATUS_SUCCESS
      console.log(this.currentStatus)
    })
  )
}

Answer 2

尝试改用箭头函数。像这样：

.then(res => {
  console.log(res)
  this.currentStatus = STATUS_SUCCESS
  console.log(this.currentStatus)
})

我认为它类似于 this。