1

I'm using Vue Draggable in my Nuxt Js project and am looping over a series of components which is fetched from an API and cloned into my page. One of these contains my chart data options, which I can see quite clearly when I do a console.log of my data, and it has the appropriate objects.

However, when I output this to my page, Vue Draggable appears to be stripping out my nested objects, why?

Here's what my component.datasets[0].chartOptions would look like before outputting to the page:

data from api

When I console log this.report in my function that gets my report, I can see my chart options clearly:

enter image description here

Here's what Vue Draggable gives me for my component.datasets[0].chartOptions which I'm outputting within my v-for:

{
  "legend": {},
  "scales": {},
  "elements": {},
  "responsive": true,
  "maintainAspectRatio": false
}

And for reference, here's my v-for:

<draggable
  class="dragArea h-auto pb-96"
  :list="report"
  group="components"
>
  <div
    v-for="(component, index) in report"
    :key="index"
  >
    <div v-if="component.type == 'chart'">
      <div class="chart chart--generic" v-if="component.datasets && component.datasets[0]">
        <pre>
          {{ component.datasets[0].chartOptions }}
        </pre>
        <LineChart
          :options="component.datasets[0].chartOptions"
          :labels="component.datasets[0].labels"
          :datasets="component.datasets"
        />
      </div>
    </div>
  </div>
</draggable>

What am I missing?

4

0 回答 0