Question

有人可以告诉我我在JavaScript文件中做错了什么。

我是Vue.js的新手，所以非常感谢您的帮助

Plotly.vue

<template src="../../views/plotlychartshtml/plotlycharts.html"></template>

<script>
    import BarChart from '@/assets/javascripts/plotlychartsBar'

     export default {
    components: {
      'vue-plotly': BarChart 
    }
  }
</script>

plotlycharts.html

<div class="wrapper">
    <div>
        <vue-plotly></vue-plotly>
    </div>
</div>

plotlychartsBar.js

import VuePlotly from '@statnett/vue-plotly'

export default {
  extends: VuePlotly,
  data() {
      return {
         datacollection: {
            data: [{ 
              x: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 
              y: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100] ,
              name: 'Plotly',
              type: 'bar',
            }]
         },
         layout: {},
         options: {},
      }
   },
    mounted() {
      this.datacollection
   }
}

我正在关注本教程https://github.com/statnett/vue-plotly，但遇到了使我的JS代码正确的挑战。

我收到此错误消息但不确定如何解决它：

vue.esm.js？efeb：591 [Vue warn]：数据属性“options”已被声明为prop。请改用prop默认值。

在

中找到

---> <BarPlotly> at C:\Users\martinha\vue-plotly\src\Plotly.vue
       <Plotlycharts> at src/components/vuePlotly/Plotlycharts.vue
         <App> at src/App.vue
           <Root>

在

中找到

---> <BarPlotly> at C:\Users\martinha\vue-plotly\src\Plotly.vue
       <Plotlycharts> at src/components/vuePlotly/Plotlycharts.vue
         <App> at src/App.vue
           <Root>

Answer 1

看起来像plotlychartsBar.js 扩展 VuePlotly中的组件声明（已将options声明为prop）而不是声明在其子components 中：

export default {
  //extends: VuePlotly, <= incorrect
  components: {
    VuePlotly,
  },

Answer 2

当我遇到同样的问题时，我的搜索中出现了这个问题。

我在 Nuxt 中使用 @nuxtjs/composition-api 模块时遇到此错误。

我在路由器组件中使用了 @nuxtjs/composition-api。我还在调用 createLocalVue 的测试中使用了 localVue.use(VueCompositionAPI )。

看起来，如果您在组件中使用 @nuxtjs/composition-api，则不需要将 localVue.use(VueCompositionAPI ) 添加到测试中。

data属性已声明为prop

2 个答案: