缺少所需的道具

时间:2019-01-23 00:36:35

标签: javascript vue.js vuejs2 vue-component vue-router

我在chrome开发工具中看到“缺少必需的道具”错误。我一直在遵循说明和类似情况,但是仍然无法预知道具不会动,因此我开始认为这是一个概念性问题。

我有一个像这样的组件

<template>
  <div class="external">
    <div @click="sendMyProps" class="internal">
 ...
    </div>
  </div>
</template>

成为脚本标记中的sendMyProps方法并导出默认值,例如:

  methods: {
    sendMyProps () {
      this.$router.push({ name: 'destiny', params: { menu: 'destiny' }})
    },

将其存储在其中的主要成分(可能无关紧要)是:

<template>
  <div>
    <External></External>
    <AnotherOne></AnotherOne>
    <AnotherTwo></AnotherTwo>
  </div>
</template>

<script>
import External from '@/components/External'
import AnotherOne from '@/components/AnotherOne'
import AnotherTwo from '@/components/AnotherTwo'


export default {
  name: 'Main',
  components: {
    External ,
    AnotherOne,
    AnotherTwo,
  }
}
</script>

在我的路线中,所有信息均已导入:

{
  path: '/destiny',
  name: 'destiny',
  components: {
    default: Destiny,
    header: Header,
    footer: Footer
  },
  props: true
}

最后,目标组件看起来非常大:

<template>

  <div class="finalComponent">
      <span @click="active = 'destiny'" :class="{ active: active ==='destiny' }">destiny</span>
      <span @click="active = 'blabla'" :class="{ active: active ==='blabla' }">ASpan</span>
...
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
...

export default {
  created () {
    this.aMethod()

  },
  mounted () {
    this.active = this.$props.menu
  },
...
  props: {
    menu: {
      type: String,
      required: true,
      default: 'house'
    }
  }
}
</script>

我相信我已经拥有一切,但是我需要的变量没有被加载。根据chrome dev工具,它甚至没有从路由器发送到组件。周围迷人的灵魂可以使我摆脱这种困扰吗?谢谢

0 个答案:

没有答案