Error with passing a prop from parent to child component

Question

So I am having an issue with passing down a prop from my parent view to another view, right now I am just testing using a simple variable but it doesn't seem to be picking it up... there are no errors or anything, it is just not displayed on my page.

Here is my parent code:

<template>
  <v-app>
    <Navbar v-bind:currency="currency"/>
    <v-content class="mx-5 my-5" v-bind:currency="currency">
      <router-view></router-view>
    </v-content>

  </v-app>
</template>

<script>
import Navbar from '@/components/Navbar'

export default {
  name: 'App',
  components: {
    Navbar
  },
  data() {
    return {
      currency: "$ test"
    }
  },
};
</script>

And here is the code snippets from my child element:

export default {
  name: "Home",
  props: ['currency']
}

And where I use the currency:

<div class="text-center green--text font-weight-bold headline">{{ currency }}</div>

Can anyone see anything I have done wrong there as to why this element is not being picked up?

Kind Regards, Josh

Answer 1

It should work fine, I don't see anything wrong with it: Here's a simple working reproduction. Check it with that to make sure there are no differences.