Блог

Используя компонент класса Vue, как получить значение вычисляемой переменной? Попытка использовать this.bar выдает ошибку: Property 'bar' does not exist on type 'Vue'.

 <script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
    computed: {
        bar() {
            return true;
        },
    },
    methods: {
        qux() {
            // How to get the value of bar here?
            if (this.bar) {
                baz();
            }
        },
    },
})
export default class Foo extends Vue {}
</script>
  

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

Вы должны изменить то, что у вас есть для этого

 <script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component  
export default class Foo extends Vue {
  get bar(): boolean {
    return true;
  }
  qux() {
    if (this.bar) {
        baz();
    }
  }
}
</script>  

Подробнее об использовании компонентов класса Vue читайте в этой статье

Есть ли причина, по которой вы не хотите использовать getter?

 @Component({})
export default class Foo extends Vue {
  get bar() { return true }
}
  

Это преобразуется в вычисляемое свойство

Если вы используете vue-property-decorator, все переходит в расширенный класс.

Обычный Vue:

 export default {
  data(){
    return {}
  },
  computed: {
    bar() {
        return true;
    },
  },
  methods: {
    qux() {
        if (this.bar) {
            baz();
        }
    }
  }
}
  

То же самое в Typescript

 @Component({})

export default class Foo extends Vue {
  get bar() {
    return true;
  }

  private qux() {
    if (this.bar) {
      this.baz();
    }
  }

  private baz() {
    //do smth
  }
}