@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, в общем толком не знаю.
Как думаете в чём может быть проблема?
  • Вопрос задан
  • 398 просмотров
Решения вопроса 1
Aetae
@Aetae Куратор тега Vue.js
Тлен
Функция 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
Никогда так не делал, но выглядит как будто компоненты загружаются раньше пропсов, не?
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы