Как использовать вычисленные реквизиты в Vue.js с машинописным текстом?


Как использовать вычисленные реквизиты в Vue.js с машинописным текстом?

23.08.2018 12:09:09 Просмотров 34 Источник

Существует много документации о том, как взаимодействовать с Vue.js использование языка JavaScript и немного о TypeScript. Вопрос в том, как вы определяете computed реквизитов в компоненте vue, если он написан на машинописном языке?

Согласно официальному примеру, computed - это объект с функциями, которые будут кэшироваться на основе их зависимых реквизитов.

Вот пример, который я сделал:

import Vue from 'vue';
import { Component } from "vue-property-decorator";

@Component({})
export default class ComputedDemo extends Vue {
    private firstName: string = 'John';
    private lastName: string = 'Doe';
    private computed: object = {
        fullName(): string {
            return `${this.firstName} ${this.lastName}`;
        },
    }
}

И html:

<div>
    <h1>Computed props ts demo</h1>
    <ul>
        <li>First name: {{firstName}}</li>
        <li>Last name: {{lastName}}</li>
        <li>Together: {{fullName}}</li>
    </ul>
</div>

Третий элемент списка ничего не выводит. Кто-нибудь может сказать мне, как определить computed в этом случае, пожалуйста?

У вопроса есть решение - Посмотреть?

Ответы - Как использовать вычисленные реквизиты в Vue.js с машинописным текстом? / How to use computed props in Vue.js with TypeScript?

Badgy

23.08.2018 02:18:17

Из-за циклического характера файлов объявлений Vue TypeScript может испытывать трудности с выводом типов определенных методов. По этой причине, вы, возможно, потребуется, чтобы аннотировать тип возвращаемого значения методов, как визуализация, и те, в компьютерной.

import Vue, { VNode } from 'vue'

const Component = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // need annotation due to `this` in return type
    greet (): string {
      return this.msg + ' world'
    }
  },
  computed: {
    // need annotation
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` is inferred, but `render` needs return type
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

Если вы обнаружите, что вывод типа или завершение элемента не работают, аннотирование определенных методов может помочь решить эти проблемы. Использование опции --noImplicitAny поможет найти многие из этих необъявленных методов.

Дополнительная Информация

Является ответом!
Jeremy Walters

23.08.2018 02:32:37

Для объявления вычисляемых свойств можно использовать методы доступа к свойствам. Смотри Вью Класса Компонента. Геттер будет активирован, как только вы введете входные данные.

Например:

<template>
    <div>
        <input type="text" name="Test Value" id="" v-model="text">

        <label>{{label}}</label>
    </div>

</template>

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

@Component({})
export default class About extends Vue {
    private text = "test";

    get label() {
        return this.text;
    }
}
</script>

Обновление для Vue Composition Api

<template>
  <div>
    <input type="text" name="Test Value" id v-model="text" />

    <label>{{label}}</label>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "@vue/composition-api";

export default defineComponent({
  setup() {
    const text = ref("test");

    const label = computed(() => {
      return text.value;
    });

    return {
      text,
      label
    };
  }
});
</script>
Помочь в развитии проекта:
Закрыть X