CODEWITHSUNDEEP
vue.js
ARTLoe
ARTLoe

Reputation: 1799

The data property is already declared as a prop

Could one kindly advise me what I am doing wrong in JavaScript file.

I am new to Vue.js so your help would be much appreciated

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
   }
}

I am following this tutorial https://github.com/statnett/vue-plotly but having challenges getting my JS code right.

I get this error message but unsure how to resolve it:

vue.esm.js?efeb:591 [Vue warn]: The data property "options" is already declared as a prop. Use prop default value instead.

found in

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

found in

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

Upvotes: 2

Views: 6794

Answers (2)

james2doyle
james2doyle

Reputation: 1439

This question came up in my search when I was having the same problem.

I was getting this error in Nuxt while using the @nuxtjs/composition-api module.

I was using @nuxtjs/composition-api in my component for the router. I was also using createLocalVue in my test that was calling localVue.use(VueCompositionAPI ).

It looks like, if you are using @nuxtjs/composition-api in your component, you don’t need to add localVue.use(VueCompositionAPI ) to your test.

Upvotes: 0

ghybs
ghybs

Reputation: 53320

Seems like your Component declaration in plotlychartsBar.js extends VuePlotly (which already declares options as a prop) instead of declaring it within its child components:

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

Upvotes: 2

Related Questions