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>
  • Вопрос задан
  • 90 просмотров
Решения вопроса 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
  }
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Страховой Кабинет Нижний Новгород
от 60 000 до 90 000 руб.
от 90 000 до 220 000 руб.
от 60 000 до 90 000 руб.
16 июл. 2019, в 12:33
20000 руб./за проект
16 июл. 2019, в 12:18
5000 руб./за проект