Question

我有两个基于两个相同数据结构的vue.js组件，可以为它们分配从服务器接收的不同值。

我想根据从服务器接收到的数据自动生成组件（可能处于“ for”周期）。这种自动生成的组件应具有相同的数据结构，但值不同。

例如，现在我已经实现了虚拟方法：

我在模板中定义了两个vue.js组件
它们基于两种不同的数据结构
根据服务器响应分别更新数据结构。

我想成为的人

根据我从服务器收到的系列数，我为n vue.js组件添加了类似“生成器”的内容
该组件具有相同的vue数据结构
根据服务器响应集中更新数据结构。

我当前的虚拟解决方案： https://jsfiddle.net/t2j80bpn/7/

Answer 1

听起来您的“发电机”只是一个计算的。使用map将data_from_server转换为图形的对象数组。或者visualize_data可以将其转换为真实的数据项。

Vue.use(HighchartsVue.default)


let data_from_server = [
  [1, 2, 3, 1, 8, 1, 9, 2],
  [11, 2, 6, 1, 9, 10, 1, 2]
]

var app = new Vue({
  el: "#app",
  data() {
    return {
      dfs: []
    }
  },
  computed: {
    chartOptions() {
      return this.dfs.map((d, i) => ({
        id: i,
        chart: {
          type: 'spline'
        },
        title: `Chart ${i}`,
        series: [ {data: d}]
      }))
    }
  },
  methods: {
    visualise_data: function(event) {
      this.dfs = data_from_server;
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/highcharts/highcharts-vue/1ce7e656/dist/script-tag/highcharts-vue.min.js"></script>

<div id="app">
  <button v-on:click="visualise_data">Change series</button>

  <highcharts v-for="opt in chartOptions" :options="opt" :key="opt.id"></highcharts>
</div>

在Vue JS中是否可以使多个vue组件将现有数据结构与不同数据重用？

1 个答案: