Vue 오류: 계산된 속성을 동적 계산에 올바르게 사용할 수 없습니다. 해결 방법은 무엇입니까?

Vue 오류: 계산된 속성을 동적 계산에 올바르게 사용할 수 없습니다. 어떻게 해결합니까?

Vue를 사용한 개발 과정에서 계산된 속성은 일부 동적 계산 기능을 구현하는 데 종종 사용됩니다. 계산된 속성은 Vue의 매우 중요한 부분입니다. Vue 인스턴스의 속성을 계산하고 새 값을 반환할 수 있습니다. 그러나 때로는 문제가 발생하여 계산된 속성을 올바르게 사용할 수 없는 경우가 있습니다. 이때 문제를 찾아 해결해야 합니다.

아래의 간단한 예를 살펴보겠습니다. 사용자 목록이 있고 연령을 기준으로 연령 그룹을 계산해야 한다고 가정합니다.

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

위 코드에서는 계산 속성에 ageRange 메서드를 정의하여 나이를 계산합니다. 범위. 그러나 이 코드를 실행하려고 하면 오류가 나타납니다.

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

이 오류는 계산된 속성에 정의한 메서드에 setter가 없음을 의미합니다. Vue에서는 setter를 정의하여 이 문제를 해결할 수 있습니다. 코드를 수정하고 계산 속성을 사용 방법으로 변경할 수 있습니다.

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

위 코드에서는 계산을 메서드로 변경하여 메서드를 정의하여 동적으로 연령 그룹을 계산하는 기능을 구현했습니다. 이렇게 하면 오류가 방지되고 동일한 기능이 유지됩니다.

메서드를 사용하는 것 외에도 watch 속성을 사용하여 속성을 동적으로 계산할 수도 있습니다. 다음은 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>

위 코드에서는 watch 속성을 사용하여 userList 속성의 변경 사항을 수신하고, 변경되면 연령 그룹을 계산하고 getAgeRange를 통해 ageRange 속성을 업데이트합니다. 방법.

요약하자면, 동적 계산에 계산된 속성을 사용할 때 올바르게 사용할 수 없는 문제가 발생하면 메서드를 사용하거나 속성을 관찰하여 동일한 기능을 달성할 수 있습니다. 이렇게 하면 오류를 해결하고 코드 기능을 변경하지 않고 유지할 수 있습니다. 이 글이 Vue 오류 문제를 해결하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 오류: 계산된 속성을 동적 계산에 올바르게 사용할 수 없습니다. 해결 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!