安装后如何使物体反应?

时间:2019-11-21 11:55:26

标签: typescript vue.js

我有一个组件,在安装后(无法在安装前完成),该组件与服务交互以创建然后接收非反应性对象。有什么想法可以使该对象具有反应性吗?

谷歌搜索和vue文档搜索使我无所适从。

@Component
export default class Curve extends Vue {

  chunks: Chunk<string>;

  async mounted(){ 
    let service = new ChunkManager<string>(interval, this.sampler, etc...);
    this.chunks = this.manager._chunk;
 };
};    

和块类:

export class Chunk<T>{
    id = 'testID';
    constructor(){};
    valid = false;
    toRender: T;
};

答案:

贷记到Macintosh_89。这是一个格式化的答案,表明将属性设置为null可以使它变为反应性,即使将其设置为非反应性对象也是如此。

@Component
export default class Curve extends Vue {

  chunk1 = null; 
  chunk2 = undefined;

  async mounted(){ 

     this.$watch('chunk1', () => console.log('chunk1 changed'),
           {immediate: false, deep: true});
     this.$watch('chunk2', () => console.log('chunk2 changed'),
           {immediate: false, deep: true});

     let exampleObj = = {
        name: 'bob',
        age: 111
     };

     this.chunk1 = bob;
     this.chunk2 = bob;
     console.log(chunk1, chunk2);
  };
};  

1 个答案:

答案 0 :(得分:1)

好的,我会尽力的。也许这就是您想要的。我不知道您的对象如何更新。我假设这是可能的工作方式。请原谅格式

  <template>
    <div>{{ reactiveChunk }} </div>  
    </template>    

   data :() => ({
            chunks:null
              }),
   mounted ():{
             this.serviceCall() // from methods
               }
   watch:{
            reactiveChunk: function(){
            return this.chunks //assuming this gets updated routinely
           },
   method:{
             serviceCall :function() {
             let data = servicecall_to_API(params)
             this.chunks = data  
         }