Как динамически импортировать компонент

Question

Я пытаюсь создать родовое поле формы в Vue, которое может быть настроено на использование различных различных виджетов для ввода. Я хотел бы иметь каталог входов, а затем импортировать правильный и использовать его в моем компоненте. Пока я не могу заставить импорт работать. Этот компонент вдохновлен библиотекой Winterfell для React, которая использует схему для настройки формы. Я использую Vue со стандартным загрузчиком webpack и JSX.

Вот мой простой компонент FieldValue. Я хотел бы иметь возможность динамически импортировать компонент, такой как ./inputs/TextInput (или что-либо еще в поддиректоре ввода по имени).

<script> 

/* Schema format 
    { 
     id: 'ABCD', 
     label: 'Some text', 
     input: { 
      type: theNameOfTheInputComponentToUse, 
      options: { 
       ... 
      } 
     } 
    } 
*/ 

var Inputs = require('./inputs'); 

export default { 
    props: { 
     schema: { 
      type: Object, 
      required: true 
     } 
    }, 
    render: function(h) { 
     // let Input = Inputs[this.schema.input.type]; 
     let Input = require('./inputs/' + this.schema.input.type); 
     if (!Input) { 
      throw new Error('Unknown Input Type "' + this.schema.input.type + '". This component should exist in the inputs folder.'); 
     } 

     return (
      <div class="form-group"> 
       <label for="{this.id}" class="col-sm-2 control-label">{this.schema.label}</label> 
       <div class="col-sm-10"> 
        {JSON.stringify(this.schema)} 
        <input schema={this.schema} /> 
       </div> 
      </div> 
     ); 
    } 
}; 
</script> 

Когда я пытаюсь запустить приложение не будет компилировать и я получаю следующее сообщение об ошибке в консоли:

This dependency was not found in node_modules: 

* ./inputs 

Любой помощь в получении этой работы очень ценится!

Answer 1

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

Вы должны просто импортировать все возможные входы, а затем просто определить, какой из них использовать на основе this.schema.input.type. Что-то вроде этого:

const allInputs = { 
    text: require('./inputs/text'), 
    number: require('./inputs/number'), 
} 

const inputToUse = allInputs[this.schema.input.type] 

Она смотрит на меня, как вы уже что-то похожее на место, судя по линиям var Inputs = require('./inputs'); и // let Input = Inputs[this.schema.input.type];