Vue エラー: 無効なプロップ: プロップ「roleList」の型チェックに失敗しました。予期されたオブジェクト、配列ソリューションを取得しました

注: このブログはブロガーによって一字一句書かれており、簡単ではありませんが、オリジナリティを尊重してください。

問題の説明

Vue プロジェクトの Props 属性を介してサブコンポーネントに値を渡すとき、多くの友人が無効なプロップに遭遇することがよくあります。 : プロパティ「roleList」の型チェックに失敗しました。予期されたオブジェクト、配列 エラー メッセージを取得しました

まず、親コンポーネントと子コンポーネントによって渡されるコードを確認します。ここでは、Props属性値の転送を通じて 2 つのコンポーネント間で定義された型に注目してください。

親コンポーネント:

<template>
  <div class="app-container">
    <add-user-dialog
      :role-list="roleList"
    />
  </div>
</template>
export default {
    
    
  data() {
    
    
    return {
    
    
      roleList: [] // 角色列表
    }
  }
}

サブアセンブリ:

export default {
    
    
  props: {
    
    
    roleList: {
    
    
      type: Object, // 类型
      default: null // 默认值
    }
  }
}

解決

上記に基づくと、親コンポーネントから子コンポーネントに渡す変数の型roleListは配列であり、子コンポーネントでは であることがわかります。 >roleList 変数 型はオブジェクトであるためエラーが発生しました:子コンポーネントではオブジェクトが期待されていますが、親コンポーネントが配列を渡しました。これがエラーの原因です。 変数の型とデフォルト値を変更してください。 i=6> 属性PropsroleList

export default {
    
    
  props: {
    
    
    roleList: {
    
    
      type: Array, // 类型
      default: () => [] // 默认值
    }
  }
}

問題は解決したので、コードを書くとき、特にパラメータを渡すときは、両側のパラメータで定義された型が一貫しているかどうかに注意してください。