web-dev-qa-db-fra.com

Accéder à la fonction de données du composant props in vue

Je passe un accessoire à un composant:

<template>
   {{messageId}}
   // other html code
</template>

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            // below line gives ReferenceError messageId is not defined
            somevar: messageId,
            // other object attributes
         }
      }
   }
</script>

Dans le code ci-dessus, j'ai commenté la ligne qui donne l'erreur. Si je supprime cette ligne, elle fonctionne normalement et le rendu du modèle est correct (et je peux également voir la valeur attendue de {{messageId}}). Par conséquent, la logique de transmission des données est correcte.

Il semble que le moyen d'accéder à la variable messageId dans data () est incorrect. Alors, comment puis-je accéder aux accessoires messageId dans les données?

vue.jsvue-loader
29
rahulserver

A partir de la méthode data(), vous pouvez référencer les propriétés du composant à l'aide de this.

Donc dans votre cas:

data: function() {
  var theData = {
    somevar: this.messageId,
    // other object attributes
  }

  return theData;
}
28
thanksd

Pour affecter une propriété de données égale à un accessoire, vous pouvez utiliser watcher, comme suit:

<script>
   export default {
      props: ['messageId'],
      data: function(){
         var theData={
            somevar: "",
            // other object attributes
         }
      },
      watch: {
        messageId: function(newVal) { 
           this.somevar = newVal
        }
      }
   }
5
Saurabh

Notez que cela ne fonctionne pas si vous utilisez une fonction de flèche pour assigner vos données:

data: () => ({
  somevar: this.messageId // undefined
}),

Parce que this ne désignera pas le composant. Au lieu de cela, utilisez une ancienne fonction simple:

data: function() {
  return { somevar: this.messageId }
},
3
mufasa
<template>
   {{messaged}}
   // other HTML code
</template>

<script>
   export default {
      props: ['messaged'],
      data: function(){
         return () {
           some_var: this.messaged
         }
      },
      methods: {
      post_order: function () {
        console.log({
          some_var: this.some_var.id
        })
      }
    }

   }
</script>
0
Chinedu Ohagwu