Repository: marktext/marktext
File: src/renderer/prefComponents/imageUploader/index.vue (Vue)

Code before:
      shell.openExternal(link)
    },
    save (type) {
      const newImageBedConfig = Object.assign({}, this.imageBed, {[type]: this[type]})
      this.$store.dispatch('SET_USER_DATA', {
        type: 'imageBed',
        value: newImageBedConfig
      })
      if (type === 'github') {
        this.$store.dispatch('SET_USER_DATA', {
          type: 'githubToken',
          value: this.githubToken
        })
      }
      new Notification('Save Image Uploader', {
        body: `The Github configration has been saved.`
      })
    },
    setCurrentUploader (value) {
      const service = services[value]
      if (!service) {
        console.error(`Cannot find service "${value}"!`)
        return
      }

      const legalNotices = document.getElementsByClassName(`pref-cb-legal-notices ${value}`)
      if (!legalNotices) {
        console.error(`Cannot find legal notices of service "${value}"!`)
        return
      }
      legalNotices[0].classList.remove('error')

      const { name, agreedToLegalNotices } = service
      if (!agreedToLegalNotices) {
        legalNotices[0].classList.add('error')
        return
      }

      const type = 'currentUploader'
      this.$store.dispatch('SET_USER_DATA', { type, value })

      new Notification('Set Image Uploader', {
        body: `Set ${name} as the default image uploader successfully.`
      })
    }
  }
}
</script>

<style>
.pref-image-uploader {

Review comment (suggestion):
How about use component props to pass some state to child component, if you really want to get the DOM, use `this.$refs`. https://vuejs.org/v2/api/#ref

Code after:
      this.github = this.imageBed.github
      this.githubToken = this.prefGithubToken

      if (services.hasOwnProperty(this.currentUploader)) {
        services[this.currentUploader].agreedToLegalNotices = true
      }
    })
  },
  methods: {
    getServiceNameById (id) {
      const service = services[id]
      return service ? service.name : id
    },
    open (link) {
      shell.openExternal(link)
    },
    save (type) {
      const newImageBedConfig = Object.assign({}, this.imageBed, {[type]: this[type]})
      this.$store.dispatch('SET_USER_DATA', {
        type: 'imageBed',
        value: newImageBedConfig
      })
      if (type === 'github') {
        this.$store.dispatch('SET_USER_DATA', {
          type: 'githubToken',
          value: this.githubToken
        })
      }
      new Notification('Save Image Uploader', {
        body: `The Github configration has been saved.`
      })
    },
    setCurrentUploader (value) {
      const service = services[value]
      if (!service) {
        console.error(`Cannot find service "${value}"!`)
        return
      }

      const { name, agreedToLegalNotices } = service
      if (!agreedToLegalNotices) {
        this.legalNoticesErrorStates[value] = true
        return
      }
      this.legalNoticesErrorStates[value] = false

      const type = 'currentUploader'
      this.$store.dispatch('SET_USER_DATA', { type, value })

      new Notification('Set Image Uploader', {
        body: `Set ${name} as the default image uploader successfully.`