Cara menyelesaikan ralat Vue: tidak boleh menggunakan atribut yang dikira

Cara menyelesaikan ralat Vue: Tidak dapat menggunakan atribut yang dikira

Apabila menggunakan rangka kerja Vue untuk membangunkan projek, kami sering menggunakan atribut yang dikira untuk memproses beberapa nilai yang perlu dikira berdasarkan atribut data. Walau bagaimanapun, kadangkala kami mungkin menghadapi Vue melaporkan ralat, yang menunjukkan bahawa atribut yang dikira tidak boleh digunakan. Masalah ini mungkin berlaku dalam situasi berikut:

1. Atribut yang dikira tidak ditakrifkan dengan betul
   Dalam contoh Vue, kita harus mengisytiharkan sifat yang perlu dikira dengan mentakrifkan atribut yang dikira. Jika kita terlupa untuk mentakrifkannya, atau tidak menggunakan sintaks yang betul bagi atribut yang dikira, Vue akan melaporkan ralat yang menunjukkan bahawa atribut yang dikira tidak boleh digunakan.
2. Menggunakan atribut data yang tidak ditentukan
   Atribut yang dikira biasanya dikira berdasarkan nilai atribut data Jika kita bergantung pada atribut data yang tidak ditentukan dalam atribut yang dikira, Vue akan melaporkan ralat. Oleh itu, kita perlu memastikan bahawa atribut data yang bergantung pada atribut yang dikira telah ditakrifkan dengan betul.

Untuk menyelesaikan masalah ini, kita boleh membetulkannya melalui kaedah berikut:

1. Semak definisi atribut yang dikira
   Pertama, kita harus menyemak sama ada definisi atribut yang dikira adalah betul. Dalam bahagian sifat yang dikira pada contoh Vue, kita harus menggunakan sintaks yang betul untuk menentukan sifat yang dikira. Pastikan anda menggunakan titik bertindih (:) antara nama harta yang dikira dan definisi fungsi, dan gunakan format fungsi yang betul.

Kod sampel adalah seperti berikut:

data() {
  return {
    age: 20,
    height: 180
  }
},
computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  isAdult: function() {
    return this.age >= 18;
  },
  hasTallHeight: function() {
    return this.height > 175;
  }
}

Dalam kod di atas, kami mentakrifkan tiga atribut yang dikira dengan betul:Nama penuh, isAdult dan hasTallHeight.

2. Semak atribut data yang bergantung pada atribut yang dikira
   Anda boleh menyemak sama ada atribut data yang bergantung pada atribut yang dikira telah ditakrifkan dengan betul. Pastikan atribut data yang digunakan dalam atribut yang dikira ditakrifkan dalam objek data. Jika mana-mana sifat data bergantung tidak ditentukan, ini harus diperbaiki.

Kod sampel adalah seperti berikut:

data() {
  return {
    firstName: 'John',
    lastName: 'Doe',
    age: 20,
    height: 180
  }
},
computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  },
  isAdult: function() {
    return this.age >= 18;
  },
  hasTallHeight: function() {
    return this.height > 175;
  }
}

Dalam kod di atas, atribut data yang kami harapkan dalam atribut yang dikira telah ditakrifkan dengan betul.

3. Gunakan atribut jam tangan dan bukannya atribut yang dikira
   Jika dua kaedah di atas tidak dapat menyelesaikan masalah, kita boleh cuba menggunakan atribut jam tangan dan bukannya atribut yang dikira. Atribut jam tangan boleh digunakan untuk memantau perubahan dalam atribut data dan melakukan pengiraan responsif.

Kod sampel adalah seperti berikut:

data() {
  return {
    age: 20,
    height: 180,
    fullName: ''
  }
},
watch: {
  age: function(newVal, oldVal) {
    this.isAdult = newVal >= 18;
  },
  height: function(newVal, oldVal) {
    this.hasTallHeight = newVal > 175;
  },
  fullName: function(newVal, oldVal) {
    // 空函数，用于展示示例
  }
},
created() {
  this.fullName = this.firstName + ' ' + this.lastName;
}

Dalam kod di atas, kami menggunakan atribut jam tangan untuk memantau perubahan dalam atribut umur dan ketinggian, dan mengira nilai atribut isAdult dan hasTallHeight secara responsif. Untuk mengendalikan pengiraan atribut Nama penuh, kami menetapkannya dalam cangkuk yang dibuat.

Ringkasan

Apabila kita menghadapi ralat bahawa atribut yang dikira tidak boleh digunakan dalam pembangunan Vue, kita boleh menyelesaikan masalah dengan menyemak definisi dan penggunaan atribut yang dikira, dan sama ada atribut data yang bergantung pada atribut yang dikira adalah betul ditakrifkan. Jika itu masih tidak berjaya, kita boleh cuba menggunakan atribut jam tangan sebagai alternatif. Melalui kaedah di atas, kami boleh menyelesaikan masalah ralat Vue: atribut yang dikira tidak boleh digunakan, menjadikan projek kami lebih stabil dan boleh dipercayai.

Atas ialah kandungan terperinci Cara menyelesaikan ralat Vue: tidak boleh menggunakan atribut yang dikira. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!