发送到组件的 Prop 未定义

Question

我真的陷入了这个愚蠢的问题。我使用了许多道具，但这个令人头疼。也许我错过了什么......!!! 我正在将一个对象作为道具从我的页面发送到一个组件（就像我做过很多次一样！！）但是在我的组件上它是未定义的！我尝试了很多方法（一些简单的数据而不是 obj，而不是绑定道具，......）但没有！ 顺便说一句，我在 nuxt 2.13 这是我的代码：

页面：

<template>
   <mycomp :err="inputError" />
<template>

<script>
import mycomp from '~/components/mycomp'
export default{
components:{
   'mycomp': mycomp
}
data(){
    return{
      inputError: {
        error: false,
        msg: null
      }
    }
  },
}
</script>

和我的组件：

<template>
   <div>
      {{err}} --> this show nothing too
   </div>
<template>

<script>
export default{
props:['err']
data(){
    return{
      //
    }
  },
  create(){
    console.log(this.err) // undefined
  }
}
</script>

Answer 1

你犯了很多错字。就像提到的kerbh0lz。我敦促您验证传入的道具。它将为您节省大量调试时间。

无论如何这里是工作的sn-p

//App.vue
<template>
  <div id="app">
    <HelloWorld :err="inputError"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      inputError: {
        error: false,
        msg: null
      }
    };
  }
};
</script>

//HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ err }}</h1>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    err: {
      type: Object
    }
  },
  created() {
    console.log(this.err);
  }
};
</script>

Sandbox