Madeas
@Madeas
UX/UI designer | Frontend developer

Как обратиться к одному из элементов списка?

Добрый день!

Составил такой список:

new Vue({
  el: '#masthead',
  data() {
    return {
      list: [
        {id: 0, name: 'name-1'}, 
        {id: 1, name: 'name-2'}, 
        {id: 2, name: 'name-3'}, 
        {id: 3, name: 'name-4'}, 
        {id: 4, name: 'name-5'}
      ]
    }
  },
})


Я использую общий шаблон для страниц и по задумке, каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка.
Подскажите, как нужно прописать, чтобы на странице выводился только один из пунктов, а не весь список?
Я добавил айдишники, полагая, что на них будет проще опираться, но как к ним обратиться не пойму.

п.с. заранее прошу прощения, возможно, не точно сформулировал задачу, как смогу перефразировать, напишу.

UPD:
Предполагаемая структура

#masthead
        .content(v-for="item in list" data-title=  вывести сюда)
            h1 или сюда


В html это выглядит примерно так, т.е. это я могу сделать. А вот как вывести только второй или третий пункт?
<div id="masthead">
  <div 
    class="content" 
    v-for="item in list" 
    :key="item.id" 
    :data-title="item.name">
  <h1>{{ item.name }}</h1>
  </div>
</div>
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
@ParaBellum577
list[0].name, list[1].name...

Либо вывести каждый элемент поочередно куда тебе нужно:
list.map(item, k => {
<h1 key={k + item.id}>{item.name}</h1>
})

//Можно с условием: //
list.map(item, k => {
if(item.id === 3) {
<h1 key={k + item.id}>{item.name}</h1>
} else {
null **(something  else)**
}
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
{{ header(1) }}

methods: {
  header(id) {
    let el = this.list.find((item) => {
      return item.id === id
    })
    return el.name
  }
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Enapter Санкт-Петербург
от 160 000 до 240 000 ₽
Junto Москва
от 120 000 до 180 000 ₽
25 февр. 2020, в 15:19
25000 руб./за проект
25 февр. 2020, в 15:14
500 руб./в час
25 февр. 2020, в 14:56
120000 руб./за проект