Vue-Fehler: Das berechnete Attribut kann nicht korrekt für die dynamische Berechnung verwendet werden.

Vue-Fehler: Das berechnete Attribut kann nicht korrekt für die dynamische Berechnung verwendet werden. Wie lässt sich das Problem lösen?

Im Entwicklungsprozess mit Vue werden berechnete Attribute häufig zur Implementierung einiger dynamischer Berechnungsfunktionen verwendet. Die berechnete Eigenschaft ist ein sehr wichtiger Teil von Vue. Sie kann die Eigenschaften der Vue-Instanz berechnen und einen neuen Wert zurückgeben. Manchmal stoßen wir jedoch auf Probleme und das berechnete Attribut kann nicht korrekt verwendet werden. Zu diesem Zeitpunkt müssen wir das Problem herausfinden und lösen.

Sehen wir uns unten ein einfaches Beispiel an und wir müssen ihre Altersgruppe anhand ihres Alters berechnen:

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

Im obigen Code haben wir im berechneten Attribut eine ageRange-Methode definiert, um das Alter zu berechnen Reichweite. Wenn wir jedoch versuchen, diesen Code auszuführen, wird ein Fehler angezeigt:

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

Dieser Fehler bedeutet, dass die Methode, die wir in der berechneten Eigenschaft definiert haben, keinen Setter hat. In Vue können wir dieses Problem lösen, indem wir einen Setter definieren. Wir können den Code ändern und das berechnete Attribut in die Verwendungsmethode ändern:

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

Im obigen Code haben wir berechnete in Methoden geändert, um die Funktion der dynamischen Berechnung der Altersgruppe durch Definieren einer Methode zu erreichen. Dadurch werden Fehler vermieden und die Funktionalität bleibt erhalten.

Zusätzlich zur Verwendung von Methoden können wir das Watch-Attribut auch zur dynamischen Berechnung von Eigenschaften verwenden. Das Folgende ist ein Beispiel für die Verwendung des Watch-Attributs:

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

Im obigen Code verwenden wir das Watch-Attribut, um auf Änderungen im UserList-Attribut zu warten. Wenn es sich ändert, berechnen wir die Altersgruppe und aktualisieren das AgeRange-Attribut über getAgeRange Verfahren.

Um es zusammenzufassen: Wenn Sie bei der Verwendung berechneter Attribute für dynamische Berechnungen auf Probleme stoßen, die nicht korrekt verwendet werden können, können Sie versuchen, Methoden zu verwenden oder Attribute zu überwachen, um dieselbe Funktion zu erreichen. Dadurch kann der Fehler behoben werden und die Funktionalität des Codes bleibt unverändert. Ich hoffe, dass dieser Artikel bei der Lösung von Vue-Fehlerproblemen hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonVue-Fehler: Das berechnete Attribut kann nicht korrekt für die dynamische Berechnung verwendet werden.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!