问题描述
我在我的 Nuxt Js 项目中使用 Vue Draggable 并循环遍历一系列从 API 获取并克隆到我的页面的组件。其中之一包含我的图表数据选项,当我对我的数据进行 console.log
处理时,我可以非常清楚地看到这些选项,并且它具有适当的对象。
但是,当我将其输出到我的页面时,Vue Draggable 似乎正在剥离我的嵌套对象,为什么?
这是我的 component.datasets[0].chartOptions
在输出到页面之前的样子:
当我在获取报告的函数中控制台日志 this.report
时,我可以清楚地看到我的图表选项:
以下是 Vue Draggable 为我的 component.datasets[0].chartOptions
提供的内容,我在 v-for
中输出:
{
"legend": {},"scales": {},"elements": {},"responsive": true,"maintainAspectRatio": false
}
作为参考,这是我的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>
我错过了什么?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)