web-dev-qa-db-fra.com

Comment utiliser les accessoires calculés dans Vue.js avec le manuscrit

Il y a beaucoup de documentation sur la façon d'interagir avec Vue.js en utilisant le langage javascript et juste un peu sur TypeScript. La question est de savoir comment définir les accessoires computed dans le composant vue s’il est écrit sur TypeScript. Selon l'exemple officielcomputed est un objet avec des fonctions qui seront mises en cache en fonction de leurs accessoires dépendants .

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}`;
        },
    }
}

Et 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>

Le troisième élément de liste ne génère rien. Quelqu'un peut-il me dire comment définir computed dans ce cas, s'il vous plaît?

typescriptvue.jsvuejs2
5
Lev Khruschev

Vous pouvez utiliser des accesseurs de propriété pour déclarer les propriétés calculées ( https://github.com/vuejs/vue-class-component ). Le getter sera déclenché dès que vous tapez l’entrée. Voir exemple

<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>
9
Jeremy Walters

En raison de la nature circulaire des fichiers de déclaration de Vue, TypeScript peut avoir des difficultés à déduire les types de certaines méthodes. Pour cette raison, vous devrez peut-être annoter le type de retour sur des méthodes telles que render et celles calculées.

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)
  }
})

Si vous trouvez que l'inférence de type ou l'achèvement de membre ne fonctionne pas, annoter certaines méthodes peut aider à résoudre ces problèmes. L'utilisation de l'option --noImplicitAny vous aidera à trouver plusieurs de ces méthodes non annotées.

Plus d'informations

1
Badgy