Passing data from parent to be rendered on component, data passage failure

Question

I am trying to pass a first and last name to a child component to render as a custom element. Should be simple. But I am not able to link up my props for some reason. Here is the relevant parent code...

     <div class="panel-body">
            <full-name  :userData.firstname="firstname"
                        :userData.lastname="lastname"></full-name>
     </div>

<script>
    import toggleSwitch from './components/toggleSwitch.vue';

    export default {
        data () {
            return{
                userData: {
                  firstname: '',
                  lastname: ''
                }
            }
        }, 
        components: {
        'fullName': fullName
        }
    }
</script>

As you can see I call the element and pass it my two data props. Once there I simply output my data via string interpolation, and... nothing shows. Here is my output component

<template>
  <div>
    <p>{{firstname}} {{lastname}}</p>
  </div>
</template>

<script>

  export default{
    props: ['firstname', 'lastname']
  }

</script>

Am I missing something obvious? Thanks in advance.

Answer 1

It should be like this:

<full-name  :firstname="userData.firstname" :lastname="userData.lastname"></full-name>

Syntax:

<comp :prop-name='value'></comp>