Madeas
@Madeas
UI / UX 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>
  • Вопрос задан
  • 158 просмотров
Решения вопроса 2
@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)**
}
})
Ответ написан
0xD34F
@0xD34F Куратор тега Vue.js
каждый пункт из этого списка должен выводиться на конкретной странице, например, в виде заголовка

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

<h1>{{ $route.meta.title }}</h1>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
{{ header(1) }}

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

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

Войти через центр авторизации
Похожие вопросы