Colon in string - Invalid prop: type check failed

I’m using Vuex to store success / error messages (a string) after accessing an external API. The message is then accessed by the parent component and passed to a child component as a prop.

My API is correctly returning the error: “Error: Request failed with status code 400” and that string is being stored in the Vuex store and being correctly retrieved by the parent component and finally passed to the child component.

However Vue complains:

[Vue warn]: Invalid prop: type check failed for prop “appStatus”. Expected String with value “Error: Request failed with status code 400”, got Error

It seems Vue reads the : and interprets it as binding?

What am I doing wrong?

Parent component:

<template>
  <div>
    <SnackBar
      :appStatus=appStatus
      :snackbar=snackbar />
  </div>
</template>

<script>
import SnackBar from 'packs/components/SnackBar'
export default {
  components: {
    SnackBar,
  },
  data: () => ({
    appStatus: '',
    snackbar: false,
  }),
}
</script>

Child component:

<template>
  <v-snackbar
    v-model="snackbar">
    {{ appStatus }}
    <template v-slot:action="{ attrs }">
      <v-btn
        text
        left
        v-bind="attrs"
        @click="snackbar = false">
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script>
export default {
  name: 'Snackbar',
  props: {
    appStatus: {
      type: String,
    },
    snackbar: {
      type: Boolean,
    },
  },
}
</script>

No, Vue only evaluates what’s in the binding, it won’t interpret a : inside that evaluation as a binding. It sounds like you’re passing an Error object, rather than a string.

Have a look at this fiddle: https://jsfiddle.net/jamesbrndwgn/b5uw0r9d/2/

It replicates your issue. If you changed the msg to just a string, then you wouldn’t get any warnings.

1 Like

Well…I just learned something. Errors are objects not strings. I guess that makes sense, but I had never really thought about it before.

In my store I changed:
commit('SET_STATUS', error)

to:
commit('SET_STATUS', error.message)

That solves the issue.

Thanks!