Erreur Vue : L'attribut calculé ne peut pas être utilisé correctement pour le calcul dynamique. Comment le résoudre ?

Erreur Vue : L'attribut calculé ne peut pas être utilisé correctement pour le calcul dynamique, comment le résoudre ?

Dans le processus de développement utilisant Vue, l'attribut calculé est souvent utilisé pour implémenter certaines fonctions de calcul dynamique. La propriété calculée est une partie très importante de Vue. Elle peut calculer les propriétés de l'instance de Vue et renvoyer une nouvelle valeur. Cependant, nous rencontrons parfois des problèmes et l'attribut calculé ne peut pas être utilisé correctement. À ce stade, nous devons découvrir le problème et le résoudre.

Regardons un exemple simple ci-dessous. Supposons que nous ayons une liste d'utilisateurs et que nous devions calculer leur tranche d'âge en fonction de leur âge :

<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>

Dans le code ci-dessus, nous avons défini une méthode ageRange dans l'attribut calculé pour calculer l'âge. gamme. Cependant, lorsque nous essayons d'exécuter ce code, une erreur apparaîtra :

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

Cette erreur signifie que la méthode que nous avons définie dans la propriété calculée n'a pas de setter. Dans Vue, nous pouvons résoudre ce problème en définissant un setter. Nous pouvons modifier le code et changer l'attribut calculé en méthode d'utilisation :

<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>

Dans le code ci-dessus, nous avons changé calculé en méthodes pour atteindre la fonction de calcul dynamique de la tranche d'âge en définissant une méthode. Cela évite les erreurs et conserve la même fonctionnalité.

En plus d'utiliser des méthodes, nous pouvons également utiliser l'attribut watch pour calculer dynamiquement les propriétés. Voici un exemple d'utilisation de l'attribut watch :

<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>

Dans le code ci-dessus, nous utilisons l'attribut watch pour écouter les changements dans l'attribut userList, et lorsqu'il change, calculons la tranche d'âge et mettons à jour l'attribut ageRange via getAgeRange. méthode.

Pour résumer, lorsque vous utilisez des attributs calculés pour des calculs dynamiques, si vous rencontrez des problèmes qui ne peuvent pas être utilisés correctement, vous pouvez essayer d'utiliser des méthodes ou regarder des attributs pour obtenir la même fonction. Cela peut résoudre l'erreur et conserver la fonctionnalité du code inchangée. J'espère que cet article sera utile pour résoudre les problèmes d'erreur de Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!