Добрый день. Помогите, пожалуйста правильно дописать условие.
Есть два массива данных в сторе:
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'."
Подскажите, как будет правильно?