我怎么能改变这个场景中this.buttonState的值呢？

Question

我在这个过程中遇到了问题。首先是我有一个处于禁用状态 (true) 的按钮，我需要在上传视频时将该值更改为 false。我有这个场景，我想我在 changing method 中得到了一个 windows 对象。任何想法，请帮助。我得到变量的未定义值。

  data: () => ({
    buttonState: true} }),
    
    
 changeBehavior() {
      let self
      (function () {
        const input = document.getElementById('uploader')
        self = this
        console.log(this)
        const changing = ({ target: { files } }) => {
          if (input.files.length > 0) {
            // self.buttonState = false

            const video = document.getElementById('output-video')
            video.src = URL.createObjectURL(files[0])
          }
        }
        input.addEventListener('change', changing)
      })()
      const au = document.getElementById('output-video')
      au.onloadedmetadata = () => {
        const hidden = document.getElementById('hiddenSlider')
        hidden.removeAttribute('hidden')
        const muteHidden = document.getElementById('muteHidden')
        muteHidden.removeAttribute('hidden')
        self = this
        self.range = [0, au.duration]
        this.max = au.duration
        const secNum = parseInt(au.duration, 10)
        let hours = Math.floor(secNum / 3600)
        let minutes = Math.floor((secNum - (hours * 3600)) / 60)
        let seconds = secNum - (hours * 3600) - (minutes * 60)
        if (hours < 10) {
          hours = '0' + hours
        }
        if (minutes < 10) {
          minutes = '0' + minutes
        }
        if (seconds < 10) {
          seconds = '0' + seconds
        }
        document.getElementById('renderizado').innerHTML =
          hours + ':' + minutes + ':' + seconds
      }
    },

  <v-btn
                      id="run"
                      class="accent-3 blue ml-15"
                      dark
                      @click="$refs.inputUpload.click()"
                    >
                      <input
                        v-show="false"
                        id="uploader"
                        ref="inputUpload"
                        accept=".mkv,video/*"
                        type="file"
                        @click="changeBehavior"
                      >
                      Select to Upload Video
                    </v-btn>
                    
                    
                           <v-btn

                id="doTrimming"
                block
                class="accent-3 blue mt-5"
                dark
                :disabled="buttonState"
                @click="cutIt"
              >
                Trim Video Now
              </v-btn>
              
              

Answer 1

在您定义 self 的地方，您需要将 this 分配给它。

changeBehavior() {
  const self = this;
  const callback = function() {
    // now you can access the vue instance when in another functions scope
    self.buttonState = true;
  }
}