@estluced

Как решить данную проблему?

Добрый вечер!
Мне нужно написать многоразовый компонент для отображения SVG, если что, то для импорта векторной графики я использую vue-svg-loader.
Сразу скину код:
<template>
	<div>
		<SvgView class="sp-svg-styles"/>
	</div>
</template>

<script>
export default{
	props:['name'],
	components:{
		SvgView:require('./../Icons/'+this.name+'.svg')
	}
}
</script>


Консоль:
Svg.vue?58b1:14 Uncaught TypeError: Cannot read property 'name' of undefined
    at eval (Svg.vue?58b1:14)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Layers/Svg.vue?vue&type=script&lang=js& (app.js:1022)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Svg.vue?c2e2:1)
    at Module../src/components/Layers/Svg.vue?vue&type=script&lang=js& (app.js:2267)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (Svg.vue?d6a3:1)
    at Module../src/components/Layers/Svg.vue (app.js:2255)


Я так думаю что проблема в рендере компонента, то есть компонент SvgView отрисовует быстрее чем родительский компонент получает name из props, в общем толком не знаю.
Как думаете в чём может быть проблема?
  • Вопрос задан
  • 239 просмотров
Решения вопроса 1
Aetae
@Aetae
Тлен
Функция require, очевидно, исполняется* во время создания(декларации) экспортируемого объекта, задолго до того как этот объект попадёт в Vue и превратится в Vue-компонент.
Функция require, очевидно, исполняется в глобальном контексте, в котором недоступен (какой-либо) this.

Нормальное решение вашей проблемы выглядит примерно так.
<template>
  <div>
    <component :is="SvgView" class="sp-svg-styles"/>
  </div>
</template>

<script>
export default{
  props:['name'],
  computed: {
    SvgView() {
      return require('./../Icons/'+this.name+'.svg');
    }
  }
}
</script>


*require на самом деле работает на этапе компиляции, подготавливая и загружая в бандл все файлы по маске ./../Icons/*.svg, а на этапе исполнения заменяется внутренней функцией, возвращающей значение по имени.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@castetus
Никогда так не делал, но выглядит как будто компоненты загружаются раньше пропсов, не?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 нояб. 2020, в 22:37
500 руб./за проект
29 нояб. 2020, в 20:54
3000 руб./за проект
29 нояб. 2020, в 20:40
25000 руб./за проект