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

Question

[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, в общем толком не знаю.
Как думаете в чём может быть проблема?

Comments

[Aetae]

Вы не понимаете Vue, вы не понимаете как работает сборка, вы даже не понимаете как работает самый базовый javascript и this в нём. Вам надо начинать с самых азов.

Answer 1

[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, а на этапе исполнения заменяется внутренней функцией, возвращающей значение по имени.

Comments

[estluced]

Большое вам спасибо за разъяснения!)

Answer 2

[castetus]

Никогда так не делал, но выглядит как будто компоненты загружаются раньше пропсов, не?

Comments

[estluced]

Я тоже так считаю, но всё-таки если есть какое либо решение, буду очень благодарен!)

[estluced]

estluced, estluced,
вот кста переделал

<template>
	<div>
		<SvgView/>
	</div>
</template>

<script>
export default{
	props:{
		name:{
			type: String,
			required: true
		}
	},
	сomponents:{
		SvgView:require(`./${this.name}.svg`)
	}
}
</script>

Uncaught Error: Cannot find module './undefined.svg'
    at webpackContextResolve (eval at ./src/components/Icons sync recursive ^\.\/.*\.svg$ (app.js:1945), <anonymous>:13:11)
    at webpackContext (eval at ./src/components/Icons sync recursive ^\.\/.*\.svg$ (app.js:1945), <anonymous>:8:11)
    at eval (SvgViewer.vue?af9c:16)
    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/Icons/SvgViewer.vue?vue&type=script&lang=js& (app.js:974)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (SvgViewer.vue?d90c:1)
    at Module../src/components/Icons/SvgViewer.vue?vue&type=script&lang=js& (app.js:2017)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)

Ну это прямое доказательство того что пропсы загружаются позже чем компоненты, пробовал через beforeCreated && Mount, проблема остается, в общем буду искать обходные пути)

[Tshmt]

сгенерируй для каждой svg свой компонент заранее

пройдтсь по папке svg fs.readdirSync
и запиши в каждой итерации
с помощью fs.writeFileSync тело компонента

и у тебя будут готовые компоненты под каждую иконку