Item click масива с выводами свойств?

Question

Я хочу организовать метод - кликаем на item массива и получаем в консоле его свойства Пример массива прикреплю Клик происходить конечно же на страннице (массива который отрендерен)

Рендер массив - 2) Клик - выдим в консоле 3 поля (т на что кликнули)

 "seats": [
 [
     {
         "number": 13345,
         "type": "mark",
         "status": "false",
     },
     {
         "number": 92225,
         "type": "peer",
         "status": "false",
     },
     {
         "number": 94245,
         "type": "mark",
         "status": "false",
     },
     {
         "number": 12345,
         "type": "mark",
         "status": "true",
 }
 ]
]

Результат клика - выдим в консоле

{
        "number": 12345,
        "type": "mark",
        "status": "true",
}

Answer 1

Интересный у вас массив объектов, получается массив в массиве)

В таком случае, обратитесь к массиву по индексу 0, чтобы вывести объекты в виде, допустим, списка:

<li v-for="item in seats[0]" @click="getItem(item)">

и соответственно метод, который будет "заносить" значение выбранного объекта в переменную activeItem getItem(item) (для вывода в консоль этого не обязательно):

getItem(item) {
  this.active = item
},

Рабочий пример:

new Vue({
  el: '#app',
  data: {
    activeItem: null,
    seats: [[{
      "number": 13345,
      "type": "mark",
      "status": "false",
    }, {
      "number": 92225,
      "type": "peer",
      "status": "false",
    }, {
      "number": 94245,
      "type": "mark",
      "status": "false",
    }, {
      "number": 12345,
      "type": "mark",
      "status": "true",
    }]]
  },
  methods: {
    getItem(item) {
      this.activeItem = item
      console.clear()
      console.log(item)
    },
  },
})

li {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <ul v-if="seats.length">
    <li v-for="item in seats[0]" @click="getItem(item)">
      {{ item.type }} {{ item.number }}
    </li>
  </ul>
  <template v-if="activeItem">
    <h4>Выбранная запись</h4><pre>{{ JSON.stringify(activeItem, 0 ,2) }}</pre>
  </template>
  <template v-else>
    Кликните на любой пункт списка
  </template>
</div>

БЛОГ НА HUSL

Item click масива с выводами свойств?

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