как повторно использовать класс es6 в vue js?

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

Имейте класс, в котором переменная обновляется наблюдаемой.

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, которое постоянно обновляется в режиме реального времени.


javascript vue.js ecmascript-6 ecmascript-2017
person SHUBHAM RAGHUWANSHI    schedule 08.10.2018    source источник
comment
Использовать вычисляемое свойство   -  person Duong Dang    schedule 08.10.2018

Ответы (2)


arrow_upward
3
arrow_downward

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

computed: {
  getA() {
    return objA.a;
  }
}
person Richard Matsen    schedule 08.10.2018
comment
Привет, используя его в вычислении, работал очень хорошо. Спасибо. на самом деле, мы используем машинописный текст с Vue.extend, так что это условие было необходимо. - person SHUBHAM RAGHUWANSHI; 09.10.2018
comment
Ура, рад, что это работает для вас. Я не использовал Typescript с Vue, но в Angular (например) обычно можно ввести any, чтобы обойти сообщения об ошибках, характерные для TS. (Так что, возможно, getA(): any { обойдет это). - person Richard Matsen; 10.10.2018

arrow_upward
2
arrow_downward

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

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

Затем вы можете использовать метод, как и вы.

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

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

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

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

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

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

person Husam Ibrahim    schedule 09.10.2018
comment
оба решения довольно хороши и работают. Я не мог создать его в данных, так как создание объекта зависит от чего-то другого. Спасибо. - person SHUBHAM RAGHUWANSHI; 09.10.2018