vue.js - props - Acceso a accesorios en la función de datos de componentes vue

vue props

Question

Le estoy pasando una utilería a un componente:

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

En el código anterior, he comentado la línea que da el error. Si elimino esa línea, funciona como es normal y la plantilla se procesa correctamente (y también puedo ver el valor esperado de {{messageId}}). Por lo tanto la lógica para pasar datos es correcta.

Parece que la forma de acceder al messageId en data () es incorrecta. Entonces, ¿cómo messageId al props messageId en los datos?

Answer 1

Desde el método data() , puede hacer referencia a las propiedades del componente usando this .

Así que en tu caso:

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

  return theData;
}

Answer 2

Para asignar una propiedad de datos igual a un objeto, puede usar el observador, como se indica a continuación:

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

Answer 3

Tenga en cuenta que esto no funciona si está utilizando una función de flecha para asignar sus datos:

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

Porque this no apuntará al componente. En su lugar, utilice una función antigua simple:

data: function() {
  return { somevar: this.messageId }
},

Answer 4

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