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

Question

[Andrej Sharapov]

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

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>

Answer 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)**
}
})

Comments

[Andrej Sharapov]

Сделал так, работает.
Если я убираю .id из v-for, то у меня становится две строки с одинаковым значением.

<div id="masthead">
  <div
    class="content"
    v-for="item in list[1].id"
    :key="item.id"
    data-title="">
  <h1> {{list[2].name}} </h1>
  </div>
</div>

Только у меня вопрос. Правильно ли это?)
Получается, что это можно прочитать как - "для листа, получить одно значение, опираясь на id и вывести любое имя". Верно?

Не совсем понимаю логику -__- уж простите за глупый вопрос

Answer 2

[0xD34F]

каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка

Раскидайте элементы списка по метаданным маршрутов, и

<h1>{{ $route.meta.title }}</h1>

Answer 3

[Фёдор Гребенников]

{{ header(1) }}

methods: {
  header(id) {
    let el = this.list.find((item) => {
      return item.id === id
    })
    return el.name
  }
}