Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul untuk pengiraan dinamik Bagaimana untuk menyelesaikannya?

Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul untuk pengiraan dinamik, bagaimana untuk menyelesaikannya?

Dalam proses pembangunan menggunakan Vue, atribut yang dikira sering digunakan untuk melaksanakan beberapa fungsi pengiraan dinamik. Sifat yang dikira adalah bahagian yang sangat penting dalam Vue Ia boleh mengira sifat-sifat contoh Vue dan mengembalikan nilai baharu. Walau bagaimanapun, kadangkala kita menghadapi beberapa masalah dan atribut yang dikira tidak dapat digunakan dengan betul Pada masa ini, kita perlu mengetahui masalah dan menyelesaikannya.

Mari kita lihat contoh mudah di bawah Katakan kita mempunyai senarai pengguna dan kita perlu mengira julat umur mereka berdasarkan umur pengguna:

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.age }} - {{ ageRange(user.age) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 35 },
      ],
    };
  },
  computed: {
    ageRange(age) {
      if (age < 20) {
        return '青少年';
      } else if (age >= 20 && age <= 30) {
        return '青年';
      } else {
        return '中年';
      }
    },
  },
};
</script>

Dalam kod di atas, kami menentukan kaedah julat umur dalam atribut yang dikira kepada. Kira julat umur. Walau bagaimanapun, apabila kami cuba menjalankan kod ini, ralat akan muncul:

[Vue warn]: Computed property "ageRange" was assigned to but it has no setter.

Ralat ini bermakna kaedah yang kami takrifkan dalam sifat yang dikira tidak mempunyai penetap. Dalam Vue, kita boleh menyelesaikan masalah ini dengan mentakrifkan penetap. Kami boleh mengubah suai kod dan menukar atribut yang dikira kepada kaedah penggunaan:

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.age }} - {{ getAgeRange(user.age) }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 35 },
      ],
    };
  },
  methods: {
    getAgeRange(age) {
      if (age < 20) {
        return '青少年';
      } else if (age >= 20 && age <= 30) {
        return '青年';
      } else {
        return '中年';
      }
    },
  },
};
</script>

Dalam kod di atas, kami menukar pengiraan kepada kaedah untuk mencapai fungsi pengiraan kumpulan umur secara dinamik dengan mentakrifkan kaedah. Ini mengelakkan ralat dan mengekalkan fungsi yang sama.

Selain menggunakan kaedah, kami juga boleh menggunakan atribut jam tangan untuk mengira sifat secara dinamik. Berikut ialah contoh penggunaan atribut jam tangan:

<template>
  <div>
    <ul>
      <li v-for="user in userList" :key="user.id">
        {{ user.name }} - {{ user.age }} - {{ ageRange }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 35 },
      ],
      ageRange: '',
    };
  },
  watch: {
    userList: {
      handler(newVal) {
        this.ageRange = this.getAgeRange(newVal.age);
      },
      deep: true,
    },
  },
  methods: {
    getAgeRange(age) {
      if (age < 20) {
        return '青少年';
      } else if (age >= 20 && age <= 30) {
        return '青年';
      } else {
        return '中年';
      }
    },
  },
};
</script>

Dalam kod di atas, kami menggunakan atribut jam tangan untuk mendengar perubahan dalam atribut userList, dan apabila ia berubah, kira kumpulan umur dan kemas kini atribut ageRange melalui getAgeRange kaedah.

Untuk meringkaskan, apabila menggunakan atribut yang dikira untuk pengiraan dinamik, jika anda menghadapi masalah yang tidak boleh digunakan dengan betul, anda boleh cuba menggunakan kaedah atau menonton atribut untuk mencapai fungsi yang sama. Ini boleh menyelesaikan ralat dan mengekalkan fungsi kod tidak berubah. Saya harap artikel ini akan membantu dalam menyelesaikan masalah ralat Vue.

Atas ialah kandungan terperinci Ralat Vue: Atribut yang dikira tidak boleh digunakan dengan betul untuk pengiraan dinamik Bagaimana untuk menyelesaikannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!