2
votes

Dans Vue.js, pourquoi ma propriété calculée ne fonctionne-t-elle pas

Dans le code suivant:

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  computed: {
    myMessage: function() {
      return "hello";
    }
  },
  data: {
    message: this.myMessage
  },
  mounted: function() {
    console.log(this.myMessage);
  }
})

https://jsfiddle.net/hk49eL38/

si je remplace:

this.myMessage par une chaîne (par exemple "Hello world"), il s'affiche correctement.

Mais quand j'utilise this.myMessage , aucun texte n'est rendu.

Pourquoi?

javascript vue.js

1 commentaires

Pensez-y comme ceci: data est l'endroit où vous stockez vos valeurs initiales, calculé est comme son nom l'indique, résultats de certains calculs.

4 Réponses :

1
votes

Vous ne devriez pas utiliser ceci avant d'écrire myMessage , car VueJS ne fonctionne pas comme ça. Il considère déjà tout dans ce contexte. Vous devriez le faire comme ceci:

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ myMessage }}</p>
</div>

1 commentaires

D'accord, le rendu de {{myMessage}} fonctionnera, mais le vrai problème est que l'OP essaie d'utiliser la propriété calculée comme valeur initiale d'une propriété data et ceci ne fonctionne pas en raison du cycle de vie des composants.

-2
votes

Essayez de changer le message de données dans mon message calculé

0 commentaires

5
votes

Le problème est que vous essayez d'utiliser la propriété calculée comme valeur initiale de la propriété de données message .

Lorsque la fonction data est appelée en interne par Vue, les propriétés calculées n'ont pas encore été évaluées, cela se fait très tôt, avant le hook created .

Si vous essayez de consigner la valeur de la propriété calculée dans le hook beforeCreated (le premier hook de cycle de vie) au lieu du monté comme dans votre exemple, vous verra qu'il est indéfini .

Voir le cycle de vie des composants :

(*) Diagramme rogné par souci de concision

Les propriétés calculées sont évaluées à l'étape "Initier les injections et la réactivité" du diagramme ci-dessus.

Les valeurs de propriété calculées ne peuvent pas être utilisées comme valeur initiale d'une propriété de data , et elles dépendent normalement des valeurs de propriété data et d'autres valeurs externes et réactives (par exemple, Vuex getters, paramètres du routeur Vue, etc.).

0 commentaires

-1
votes

Essayez de définir la valeur de myMesssage sur message lorsque le composant est monté.

mounted: function() {
    this.message = this.myMessage
}

0 commentaires