Vue.js基於select的動態JSON導入

Question

我正在嘗試顯示大量的json數據集，其中有7000多個。 我的頁面上有一個選擇，允許用戶選擇他們要查看的數據集。 一個小例子可能是顏色，僅想象我有7000種顏色。 這是一個簡單的模型。

Select a color [Dropdown]

Name: Red
RGB: 255 0 0
Hex: #FF0000
Complementary Colors: #00FFFF, #FFB03B, #B64926, #8E2800
Analogous Colors: $FF004C, #FF001A, #FF1A00, #FF4D00
Triads: #00FF00, #0000FF, #FF1A00, #FF4D00
etc.

我以為可以在select的值更改時動態加載適當的json文件進行顯示，但我了解到

this.$http.get

不適用於本地文件。 我知道我可以在導出默認語句的頂部導入文件，但是那時我無法在代碼中導入7000個文件。 同樣，不允許在計算值或方法內部導入文件。

處理需要動態加載的大量json數據文件的最佳方法是什么？ 我是否被迫采用有效的API方式執行此操作？ 還是可以僅根據下拉選擇器的要求在本地加載文件？

Answer 1

我發現可以從靜態文件夾加載這些文件。 模板和腳本部分的相關部分如下所示。

<template>
...
<select v-model="selected" @change="getData">
  <option v-for="key in data" v-bind:value="key.name">
    {{ key.name }}
  </option>
</select>
...
</template>

<script>
...
computed: {
  getData: function (selected) {
    var link = '/static/data/' + this.selected + '.json'
    this.$http.get(link).then((response) => {
      console.log(response.body)
      this.langData = response.body
    }, function (error) {
      console.log(error.statusText)
    })
  }
...
</script>