Why i am getting a warning about of string type if i am passing a string?-CodePudding

i want to pass a String to my child component like this, but previously i want to print it

this is my parent component

    {{left.leftA}} // here show me 8
        <CustomCard
          :left="left.leftA"
export default {
    name: 'Parent',
    data() {},
    setup() {
    onMounted(async () => {
        const answer = await getData(name)
        left.value = answer.response //{leftA:'A', leftB:'B'...}
      })

and in my child component i have this declaration

export default {
    name: 'CustomCard',
    props: {
    left: {
        type: String,
        required: true,
      },

i am getting this warning:

  [Vue warn]: Invalid prop: type check failed for prop "left". Expected String with 
value "undefined", got Undefined

Does it have something to do with how I am loading the data? is it ok to use onMounted?

CodePudding user response：

This is happening because the initial value for value is null. So, on initial render it throws the warning, but upon another render it has the correct prop type (a string) and renders correctly.

You have 3 options. Allow '' as an option on the prop or don’t render the component until you have the correct data or make use of computed Property.

Option-1

{{left.leftA}} // here show me 8
    <CustomCard
      :left="left.leftA ? left.leftA : ''"

Option-2

{{left.leftA}} // here show me 8
    <CustomCard v-if="loaded"
      :left="left.leftA"

and in onMounted(}

  onMounted(async () => {
        const answer = await getData(name)
        left.value = answer.response //{leftA:'A', leftB:'B'...}
        // Set the loaded flag as true here. Also make sure its set as false inside the setup()
      })

Option-3

{{left.leftA}} // here show me 8
    <CustomCard
      :left="sendVal"



In computed....

computed: {
  sendVal() {
   if(left && left.left1) return left.left1;
   return '';
  }
}