Groyreg
@Groyreg
Front-end

Рендеринг изображений по условию?

Добрый день. Помогите, пожалуйста правильно дописать условие.
Есть два массива данных в сторе:
diary_icons: [
      {
        name:'sleep',
        id: 0
      },
      {
        name: 'water',
        id: 1
      },
      {
        name: 'heart',
        id: 2
      },
      {
        name: 'food',
        id: 3
      },
      {
        name: 'gantelya',
        id: 4
      },
      {
        name: 'measure',
        id: 5
      },
      { name: 'seconds',
        id: 7
      }]

activityTypes: [
      {
        name:'Сон',
        id: 0
      },
      {
        name: 'Вода',
        id: 1
      },
      {
        name: 'Самочувствие',
        id: 2
      },
      {
        name: 'Прием пищи',
        id: 3
      },
      {
        name: 'Тренировки',
        id: 4
      },
      {
        name: 'Измерения',
        id: 5
      },
      { name: 'Спортивные тесты',
        id: 7
      }]


Мне необходимо когда их id совпадает рендерить иконку и название типа.
Я сделал так:
<div class="cal-header-m" v-for="types in activityTypes">
		<img v-for="icons in diaryIcons" v-if="icons.id === types.id" :src="getImgUrl(diaryIcons)" v-bind:alt="diaryIcons">
		<p class="type-title">{{types.name}}</p class="type-title">
</div>


Методы:
methods: {
    getImgUrl(diaryIcons) {
     	var images = require.context('../../../../assets/icons/', false, /\.png$/)
     	for(var i = 0; i < diaryIcons.length; i++){
	    	     return images('./' + diaryIcons.name + ".png")
     	}  
  }
}

Данные из стора:
computed: {
 	diaryActivities(){
 		return this.$store.state.diary.diary;
 	},
 	diaryIcons(){
 		return this.$store.state.diary.diary_icons;
 	}
}


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


Error in render: "Error: Cannot find module './undefined.png'."


Подскажите, как будет правильно?
  • Вопрос задан
  • 325 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Вместо :src="getImgUrl(diaryIcons) сделайте :src="getImgUrl(icons).

Соответственно, в методе getImgUrl избавьтесь от цикла:

getImgUrl(icon) {
  var images = require.context('../../../../assets/icons/', false, /\.png$/)
  return images('./' + icon.name + '.png')
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
[i] - пропустили.

for(var i = 0; i < diaryIcons.length; i++){
      	     return images('./' + diaryIcons[i].name + ".png")
     	}
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы