Как показать на странице ОДИН из элементов массива, где массив состоит из объектов с заданными параметрами

Question

Есть массив:

 state() {
   return {
     items: [...Array(8)].map((n, i) => ({
       id: `${i + 1}` 
     })),
}
}

На странице я хочу вывести один элемент по определенному id, как это сделать? У меня получается отобразить данные только если запускать цикл v-for item in items, но тогда отображаются все элементы массива, а мне нужен только один
Можно ли при таком формате создания массива добавить помимо id, к примеру, параметр name, но чтобы это был массив имен(Аня, Света, Маша) и каждому id присвоилось свое имя или нужно просто руками создавать отдельные объекты и задавать им все эти параметры?

Спасибо заранее

Answer 1

Использование v-for, v-if, v-show, на мой взляд в данном случае излишне.

Для формирования массива объектов из строк можно воспользоваться методом массива reduce добавляя в нем все необходимые поля.
Чтобы выводить данные одного объекта достаточно иметь идентификатор массива и индекс объекта. Можно для читаемости разметки использовать вычисляемые поля (так выводится id в данном примере)

new Vue({
  el: "#app",
  data() {
    return {
      currentItem: 0,
      items: ['Аня', 'Света', 'Маша']
        .reduce((acc, e, i) => [...acc, {name: e, id: 1000 + i}], []) 
    }
  },
  computed: {
    selectedItem(){
        return this.items[this.currentItem]
    }
  },
  methods: {
    random(){ this.currentItem = Math.floor(Math.random() * this.items.length)}
  },
})

table { border-collapse: collapse; margin-bottom: 5px; }
td, th { padding: 5px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div>
        <table border="1">
            <thead><th>ID</th><th>Name</th></thead>
            <tbody>
                <td>{{selectedItem.id}}</td>
                <td>{{items[currentItem].name}}</td>
            </tbody>
        </table>    
        <button @click="random">Random</button>
    </div>    
</div>

БЛОГ НА HUSL

Как показать на странице ОДИН из элементов массива, где массив состоит из объектов с заданными параметрами

Ответы (1 шт):