Mengapa Vue Saya Tidak Mengira Kemas Kini Harta Apabila Menggunakan Fungsi Anak Panah?

Menggunakan Fungsi Anak Panah dalam Sifat Pengiraan Vue

Dalam Vue, fungsi anak panah boleh digunakan untuk menentukan sifat yang dikira. Walau bagaimanapun, pengguna mungkin menghadapi masalah di mana warna elemen pengiraan mereka tidak berubah apabila menggunakan fungsi anak panah.

Perbandingan Kod Asal dan Diubah Suai

Kod asal menggunakan sintaks fungsi tradisional untuk mentakrifkan sifat yang dikira:

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  switchGreen: function() {
    return { green: this.turnGreen };
  },
  switchBlue: function() {
    return { blue: this.turnBlue };
  }
}

Selepas mengubah suai kod untuk menggunakan fungsi anak panah, isu timbul:

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  switchGreen: () => {
    return { green: this.turnGreen };
  },
  switchBlue: () => {
    return { blue: this.turnBlue };
  }
}

Punca Punca

Masalahnya terletak pada penggunaan fungsi anak panah. Fungsi anak panah mewarisi konteks ini daripada induk, manakala sintaks fungsi tradisional mengikat ini kepada tika Vue. Apabila menggunakan fungsi anak panah dalam sifat yang dikira, ini tidak terikat pada tika Vue, yang membawa kepada kegagalan untuk mengemas kini warna elemen yang dikira.

Penyelesaian

Kepada menyelesaikan isu tersebut, adalah disyorkan untuk menggunakan sintaks fungsi tradisional untuk sifat yang dikira. Sebagai alternatif, seseorang boleh menggunakan fungsi anak panah untuk kaedah, tetapi penting untuk mengikat ini secara eksplisit pada tika Vue menggunakan kaedah bind atau gunakan.

Atas ialah kandungan terperinci Mengapa Vue Saya Tidak Mengira Kemas Kini Harta Apabila Menggunakan Fungsi Anak Panah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!