Hỏi về thao tác với thuộc tính bên trong data

Các bác cho em hỏi sao em không thể set giá trị cho một thuộc tính ở bên trong một hàm mà lồng trong hàm khác ạ:

Cái chỗ em set “this.thua = true” trong hàm setInterval() ạ

export default {
  name: 'app',
  data () {
    return {
      timeout: 10,
      width:0,
      thua:false,
      timer:null
    }
  },
  mounted: function() {
      var width = 0;
      var pr = document.getElementById('bar');
      var timer = setInterval(function(){
        if(width >= 90) {
          this.thua = true;
          width = 0;
          clearInterval(timer);
        }else {
          width ++;
          pr.style.width = width + '%';
        }
      }, this.timeout);
  }
}

à em tìm được cách rồi ạ:

let self = this;
      var pr = document.getElementById('bar');
      var timer = setInterval(function(){
        if(width >= 100) {
          self.thua = true;
          width = 0;
          clearInterval(timer);
        }else {
          width ++;
          pr.style.width = width + '%';
        }
      }, this.timeout);

Để truy cập đến this bên trong hàm thì bạn cần dùng arrow function:

      const timer = window.setInterval(() => {
        if (width >= 90) {
          this.thua = true
          ///
        } else {
          width ++
          pr.style.width = `${width}%`
        }
      }, this.timeout)

Ngoài ra với Vue thì bạn nên sử dụng ref thay vì tự lấy element bằng getElementById().

Vâng ạ em cảm ơn nha