Как повторно использовать класс ES6 в VUE JS?

Question

Как повторно использовать некоторые существующие классы ES6 в Vue Js.

Есть класс, в котором переменная обновляется с помощью observable.

class A { 
    public a: string;
    someobservable.subscribe((a) =>{
         this.a = a;
    })
}

В vue.JS создали объектэтот класс.

Пример использования свойства:

created: {
    objA = new A();
}
methods: {
    getA() {
        if(this.objA !== undefined){
            return objA.a;
        }
    }
}

и в шаблоне vue:

<div>{{getA()}}</div>

Значение в шаблоне не синхронизированосо значением переменной в классе.

Есть ли другой способ использовать свойство в шаблоне Vue, которое постоянно обновляется в реальном времени.

Answer 1

Вы создаете экземпляр в глобальной области видимости.Вам нужно создать экземпляр вашего объекта в поле data, чтобы vue мог отслеживать любые изменения.

data: {
    objA: new A();
},

Затем вы можете использовать метод, подобный тому, который вы использовали ..

methods: {
    getA() {
       return this.objA.a;
    }
},

---

<div>{{getA()}}</div>

Или используйте вычисленное свойство, как говорили другие ..

computed: {
    getA() {
       return this.objA.a;
    }
}

---

<div>{{getA}}</div>

Оба будут иметь одинаковый эффект, но лучше использовать вычисляемое свойствовоспользоваться кешированием.

Answer 2

Он должен работать с getA() как вычисляемое свойство, а не как метод.Кроме того, вы можете пропустить оператор if, поскольку оператор return не вернет undefined.

computed: {
  getA() {
    return objA.a;
  }
}