Vue.js Динамический импорт JSON на основе выбора - PullRequest
Новая
       39

Vue.js Динамический импорт JSON на основе выбора

0 голосов
/ 06 ноября 2018

Я пытаюсь отобразить большой набор наборов данных 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.

Я думал, что смогу динамически загрузить соответствующий файл json для отображения при изменении значения выбора, но я узнал, что использование 

this.$http.get

не работает для локальных файлов. Я знаю, что могу импортировать файл в верхней части моего оператора экспорта по умолчанию, но я не могу импортировать 7000 файлов в этот момент в моем коде. Кроме того, импорт файла внутри вычисленного значения или метода не допускается.

Каков наилучший подход для обработки больших количеств файлов данных JSON, которые мне нужны для динамической загрузки? Я вынужден перейти на действительный способ API сделать это? Или я могу просто загрузить файлы локально в соответствии с запросом выпадающего списка?

1 Ответ

0 голосов
/ 07 ноября 2018

Я обнаружил, что могу загружать эти файлы из статической папки. Соответствующие части разделов шаблона и скрипта выглядят следующим образом. 

<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>
...