基于 Vue2 类的数据属性不是反应式的

Posted

技术标签:

【中文标题】基于 Vue2 类的数据属性不是反应式的【英文标题】:Vue2 class based data property is not reactive 【发布时间】:2021-08-14 12:07:18 【问题描述】:

我在基于 vue2 类的组件中使用 typescript。使用自定义类型 KeyValuePair 时,sampleData 属性在组件中不是响应式的。

export type KeyValuePair<T> = 
  [key in string | number]: T;
;

<template>
<div>
<!-- remains empty even after sampleData is updated ! -->
  sampleData  
</div> 
<template>

<script>
@Component()
export default class Sample extends Vue 

sampleData: KeyValuePair<string> = ; 

//assume it gets called somehow
sampleMethod() 
   this.sampleData['0'] = 'sample data';
  

</script>

还尝试从 getter 访问 sampleData 道具,但仍然无法正常工作。 任何解决方案或建议都可能会有所帮助!

【问题讨论】:

Change Detection Caveats 【参考方案1】:

VueJS cannot detect property addition or deletion in objects。而且由于 0 键在运行时不会出现在您的示例数据中,因此稍后添加它不会产生您期望的结果。

您需要使用Vue.set 来实现您想要的:

sampleMethod() 
   Vue.set(this.sampleData, '0', 'sample data');
  

【讨论】:

它也可以工作,const key = 0; this.sampleData = ...this.sampleData, [key]: 'sample data'

以上是关于基于 Vue2 类的数据属性不是反应式的的主要内容,如果未能解决你的问题,请参考以下文章

Vue 2 + TypeScript:避免直接改变 Prop - 在带有 vue-property-decorator 的基于类的组件中

Vue3 对类字段内部更新的反应方式与 Vue2 不同

如何在反应中将函数转换为基于类的组件?

反应JS |将函数组件更改为基于类的引用错误

使用反应挂钩将基于类的组件转换为功能组件[重复]

基于对象属性对数组元素的反应