How to make reactive variables, like the data() in Vue? Vue+Typescript

Question

How to maintain the reactivity of variables, I’ve only thought of creating a data object, to simulate a date in Vue, but maybe there are more normal ways?

example of my code:

<script lang="ts">
    import {Vue, Component, Inject} from 'vue-property-decorator';
    import {DependencyConstants} from "@/dependency/DependencyConstants";
    import {WorkspaceService, Employee, EmployeesResponse} from "@/service/WorkspaceService";


    interface Data{
        empList: Employee[];
    }
    @Component({})
    export default class Employees extends Vue {
        @Inject(DependencyConstants.WORKSPACESERVICE)
        private employees !: WorkspaceService;
        private data: Data = {
            empList: [],
        };
        public getEmployees(): void {
            const employees: EmployeesResponse = this.employees.getEmployees(new Date());
            const empList: Employee[] | undefined = employees.employees;
            this.data.empList = empList as Employee[]
        }
        public created(): void {
            this.getEmployees();
        }
    }
</script>

Properties of the Vue component are reactive by default! No need to create an untyped Data object. — Kokodoko
– Kokodoko, Commented Aug 14, 2019 at 12:00

Thomas Betous · Accepted Answer · 2019-08-14 12:03:49Z

5

If you use vue.js and typescript I strongly advise you to look at this link. You will find how to properly define data, computed, methods and so on. You will find the following example :

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

If you want reactive data, you can use property accessors (get) to declare computed properties.

From what I understood about your code, you can just do this :

@Component({})
export default class Employees extends Vue {
    @Inject(DependencyConstants.WORKSPACESERVICE)
    private employees !: WorkspaceService;

    get employees() {
        const employees: EmployeesResponse = this.employees.getEmployees(new Date());
        const empList: Employee[] | undefined = employees.employees;
        return empList
    }

    public created(): void {
        this.getEmployees();
    }
}

Yo can access directly to employees from your template. For istance :

<template>
  <ul>
    <li v-for="employee in employees" :key="employee.id">
      {{employee.name}} // I assume your employee have an id and a name
    </li>
  </ul>
</template>

edited Aug 14, 2019 at 12:03

answered Aug 14, 2019 at 11:55

Thomas Betous

5,2032 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

4e4e4i Over a year ago

But then tslint's warning tell on invoke this.getEmployees(); 'Cannt invoke an object which is possibly 'undefined', 'Cannot invoke an expression whose type lacks a call sygnature. Type Employee[] has no compatible call signature'

Thomas Betous Over a year ago

Yes it is true, because your tslint doesn't see you init it in the created hook. You can disable your tslint on this line or make a guard : this.employees && this.employees.getEmployees(new Date()) and on the next line employees && employees.employees

Ravi · Accepted Answer · 2020-03-27 17:50:35Z

Any class variables are reactive in vue+ts. similar to defining variables in data in vue+js, any getters are computed properties and methods are regular methods in vue js.

 import {Component, Prop, Vue, Watch } from 'vue-property-decorator'      
 @Component
 export default class Employee extends Vue {
        // Props
        @Prop({required: true}) Name!: string 

       // data (reactive)
       salary:number

       // computed
       get bonus(){
         return this.salary * this.performanceMetric
       }

       // methods
       addSalary(salary:number){
       }

       // watcher
       @Watch('Name') 
       watchNameChange(newName:string, oldName:string){

       }

       // life cycle hook.
       mounted(){

       }
  }

Collectives™ on Stack Overflow

How to make reactive variables, like the data() in Vue? Vue+Typescript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related