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>