Vue 3 prop not being passed

Question

I'm trying to pass a simple prop to another component in Vue 3.0.11, but I can't seem to get it to work. Here's my App component:

<template>
  <Loading :message="Importing"></Loading>
</template>

<script>
import Loading from "./components/Loading.vue";
export default {
  name: "App",
  components: { Loading },
};
</script>

<style>
</style>

And my Loading component:

<template>
  <div>{{ loadingText }}...</div>
</template>

<script>
export default {
  name: "Loading",
  props: ["message"],
  data() {
    return {
      loadingText: this.message || "Loading",
    };
  },
};
</script>

<style scoped>
</style>

I'm trying to pass the prop message with the value Importing , but in the Loading component it's telling me the message prop is undefined. Here's a REPREX: https://codesandbox.io/s/vibrant-raman-pweb4

What am I doing wrong?

Answer 1

You're trying to pass it into the prop using the v-bind: shorthand syntax: : .

Vue is expecting you to pass in the variable Importing . This doesn't exist, so it resolves as undefined.

Because your message is just an inline string, you need to either remote the : or wrap "Importing" with single quotes or backticks (useful if you want to do string interpolations that aren't complex enough to warrant a computed):

<Loading message="Importing"></Loading>

or

<Loading :message="'Importing'"></Loading>

This would also work:

<template>
  <Loading :message="message"></Loading>
</template>

<script>
import Loading from "./components/Loading.vue";
export default {
  name: "App",
  components: { Loading },
  data() {
    return {
      message: 'Importing',
    }
  }
};
</script>