Несколько шаблонов для одного компонента Vue.js, реализация?

Question

[Павел Лебедев]

Есть компоненты, который принимает в себя несколько объектов пропсом. Есть HTML файлы (30+ штук), которые содержат различную компоновку для данных.
При такой реализации дает ошибку

Cannot find module './undefined.html'

- переменной не существует при инициализации шаблона

export default {
  props: {
    id: Number,
    tmplLink: String
  },
  template: require(`./${this.tmplLink}.html`)
};

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

Также, найдена была статья по сабжу, листинг кода статьи ниже. Задача поднимается аналогичная, но автор использует VUE файлы. При попытке выполнить его код, получаю ошибку, что loader не функция.

<template>
    <component :is="component" :data="data" v-if="component" />
</template>
<script>
export default {
    name: 'dynamic-link',
    props: ['data', 'type'],
    data() {
        return {
            component: null,
        }
    },
    computed: {
        loader() {
            if (!this.type) {
                return null
            }
            return () => import(`templates/${this.type}`)
        },
    },
    mounted() {
        this.loader()
            .then(() => {
                this.component = () => this.loader()
            })
            .catch(() => {
                this.component = () => import('templates/default')
            })
    },
}
</script>

UPD#1

loader() был сразу изменен на

loader() {
      return () => import(`./templates/${this.tmplLink}`);
    }

Ошибку получал следующую:

Failed to resolve async component: function () {
return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./templates/default */ "./resources/js/makets/templates/default/index.vue"));
}
Reason: TypeError: Cannot read property 'call' of undefined

Решение из статьи меня не очень прельщает, т.к. есть необходимость в разных шаблонах, а не во всем компоненте со своей логикой.

Быть может есть варианты решения по этим двум проблемам?

Comments

[alex]

Попробуйте вместо null возвращать Promise.reject()

[Павел Лебедев]

Alex, loader естественно был изменен на это:

loader() {
      return () => import(`./templates/${this.tmplLink}`);
}

[alex]

Павел Лебедев,

Есть HTML файлы (30+ штук)

а как они выглядят? это обыный хтмл или vue-синтаксис?

[Павел Лебедев]

Alex, c примесями vue. Например v-for, v-if и тому подобное

[alex]

Павел Лебедев, на самом деле сейчас сам подобную задачу решаю. скажу сразу, удобней всего тут, наверное, юзать render-функции. если получится у себя сделать, поделюсь тут с вами решением

[Павел Лебедев]

Alex, как писал ниже, рендер функции уместно использовать, когда создаются заранее продуманные элементы (возможно не прав - поправьте). В моем случае я только знаю об объектах данных для таблиц, которые туда улетят.

[alex]

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

[Павел Лебедев]

Alex, все верно,

export default {
  props: {
    id: Number,
    tmplLink: String
  },
  template: require(`./${this.tmplLink}.html`)
};

только в таком видел переменной не существует и в поисках способа этот момент исправить

UPD_COMMENT#1

<script>
export default {
  props: {
    id: Number,
    tmplLink: String
  },
  template: require(`./templates/default/index.html`)
};
</script>

<h1>
    Lorem ipsum dolor sit amet.
    {{tmplLink}}
</h1>

При явном определении шаблона все работает

[alex]

Павел Лебедев, не работает потому, что this, это не контекст vue

[Павел Лебедев]

Alex, не могли бы более полно объяснить этот момент?

[alex]

Павел Лебедев, ну тут объяснять особо нечего. this не ссылается на контекст вью.

Answer 1

[Evgeny Kulakov]

Ошибку получаете скорее всего из-за этого условия:

if (!this.type) {
  return null
}

Т.е. при вызове this.loader у вас null там.

Comments

[Павел Лебедев]

Этот момент уже исключал, менял loader на

loader() {
      return () => import(`./templates/${this.tmplLink}`);
    }

и получаю ошибку

Failed to resolve async component: function () {
return __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./templates/default */ "./resources/js/makets/templates/default/index.vue"));
}
Reason: TypeError: Cannot read property 'call' of undefined

Насколько понимаю, источник данной ошибки уже webpack

Answer 2

[Evgeniy S]

Для этого случая используйте рендер-функции, просто идеально подходит.

Comments

[Павел Лебедев]

Если правильно понимаю, в рендере создаются заранее продуманные элементы

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

В моем случае компонент, до получения ответа с бэка, не знает о своем шаблоне

[Evgeniy S]

Павел Лебедев, поверьте, рендер-функции как раз подходят к вашему случаю. делали похожие задачи. просто логику продумайте.
п.с. рендер-функции- это не для статики, любое изменение пропса,даты,computed вызывает повторный ререндер.

[Павел Лебедев]

Evgeniy S, не могли бы поделиться примером такой реализации?
Компонент может принимать подобные массивы:

data: [
        {'Brand': 'VW', 'Speed': 100},
        {'Brand': 'Audi', 'Speed': 120},
        {'Brand': 'Mersedes', 'Speed': 150}
      ],
// OR
data: [
        {'Country': 'RU', 'Total': 1020, 'Money': 'RUB'},
        {'Country': 'EU', 'Total': 1240, 'Money': 'EUR'},
        {'Country': 'GB', 'Total': 1550, 'Money': 'GBP'}
      ],

и их загонять в таблицы

Answer 3

[Даниил Братухин]

Можно попробовать вот так (см код ниже). По сути это решение Philipp Kühn, но для вашего случая, когда в файлах хранятся шаблоны, а не компоненты. Чтобы заработало, нужно настроить загрузчик для html файлов (raw-loader отлично подойдёт) и включить компилятор в сборку (вариант "полный").

В теории это можно оптимизировать до функционального компонента, но на практике почему-то не работает. Может быть, у меня руки кривые)

export default {
  props: {
    name: {
      type: String,
      default: 'default'
    }
  },
  computed: {
    component () {
      // Не сокращать до одной строки, иначе свойство не будет реактивным.
      const name = this.name
      return () => this.load(name)
    }
  },
  methods: {
    async load (name) {
      // В import() должен быть статический элемент (как './templates/'), иначе не заработает.
      const { default: template } = await import(`./templates/${name}.html`)
      return { template }
    }
  },
  render (h) {
    return h(this.component)
  }
}

Comments

[Павел Лебедев]

Спасибо, но такая реализация не получилась :( Не хватило опыта в настройке сборщика. Проблему решил получением шаблона запросом по маршруту. Ответом получаю макет страницы с отрендеренными данными