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

Question

[Gregory]

Добрый день. Помогите, пожалуйста правильно дописать условие.
Есть два массива данных в сторе:

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'."

Подскажите, как будет правильно?

Answer 1

[0xD34F]

Вместо :src="getImgUrl(diaryIcons) сделайте :src="getImgUrl(icons).

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

getImgUrl(icon) {
  var images = require.context('../../../../assets/icons/', false, /\.png$/)
  return images('./' + icon.name + '.png')
}

Comments

[Gregory]

0xD34F, cпасибо, сработало. Я правда тоже уже сделал сам несколько иначе, но Ваш способ изящнее и короче. =)

Answer 2

[Дмитрий Лузанов]

[i] - пропустили.

for(var i = 0; i < diaryIcons.length; i++){
      	     return images('./' + diaryIcons[i].name + ".png")
     	}

Comments

[Gregory]

Predve4niy , пропустил да, не ноль правда, а [ i ] , однако проблему это не решило, ко всем типам отобразилась лишь первая иконка с индексом [ 0 ].