javascript - 在 Vue JS 中是否可以让多个 vue 组件重用现有的数据结构和不同的数据？

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>