Можно ли в Vue JS заставить несколько компонентов Vue повторно использовать существующую структуру данных с разными данными?

Question

У меня есть два компонента vue.js, которые основаны на двух одинаковых структурах данных, которым могут быть назначены разные значения, полученные с сервера.

Я хочу автоматически сгенерировать компоненты (может быть в "для«цикл» по данным, полученным с сервера.Эти автоматически созданные компоненты должны иметь одинаковую структуру данных, но разные значения.

Например, теперь я реализовал фиктивный подход:

• Я определил в шаблоне два компонента 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>