В моем приложении Vue 2 у меня есть большой объект, который передается от корневого компонента на несколько уровней к некоторым дочерним компонентам в качестве реквизита. Когда я изменяю некоторые свойства объекта, дочерние компоненты должны обновляться и перерисовываться. В некоторых случаях они делают, в других случаях они не делают. Мне нужна помощь, чтобы определить, почему это не работает.
Вот дочерний компонент, который не обновляется:
<template>
<div class="upgradeBar">
{{level}}
<div
v-for="lvlNum in maxLevel + 1"
class="level"
v-bind:class="{reached: isLevelReached(lvlNum - 1)}"
></div>
<button
class="btnUpgrade"
@click="onLevelUp()"
v-if="!isLevelReached(maxLevel)"
>
+
</button>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';
import Upgradable from "../../../models/Upgradable";
@Component()
export default class UpgradeBar extends Vue {
name: 'UpgradeBar';
@Prop() entity: Upgradable;
get level(): number {
return this.entity.level;
}
get maxLevel(): number {
return this.entity.MAX_LEVEL;
}
onLevelUp() {
this.entity.levelUp();
}
isLevelReached(level: number): Boolean {
return this.entity.level >= level;
}
}
</script>
Компонент называется так:
<UpgradeBar :entity="entity" />
Весь код работает. Когда я нажимаю кнопку btnUpgrade
entity.level действительно изменяется, но мне нужно закрыть и снова открыть компонент, чтобы увидеть изменения. Кроме того, инструмент разработки браузера не показывает изменения мгновенно. Мне нужно нажать на компонент, чтобы обновить значения в отладчике.
EDIT:
Класс entity
выглядит примерно так (отрывок):
class Entity {
name: string = 'some name';
level: number = 1;
}
Я искал глубже, и, похоже, все сводится к следующему: некоторые свойства объекта являются реактивными (у них есть методы получения / установки, созданные с помощью vue), а некоторые - нет. entity.name
имеет установщик, поэтому при его изменении обновляется компонент. entity.level
нет. Вот вопрос: почему к ним относятся по-разному? Вот журнал:
