Как разложить массив в массиве Vue.js

Question

Всем привет, внутри таблицы мне нужно отрисовать данные подобного типа

Не подскажите как это сделать?

Answer 1

Если вложенное поле является массивом, его так же можно использовать в v-for

const {
  createApp
} = Vue

createApp({
  data() {
    return {
      data: [{
        id: 1,
        title: "Text",
        price: 20,
        image: [{
          path: "img1"
        }, {
          path: "img2"
        }, {
          path: "img3"
        }]
      }]
    }
  }
}).mount('#app')

table,
th,
td {
  border: 1px solid black;
}

<script src="https://unpkg.com/vue@3"></script>
<div id="app">
  <table>
    <tr v-for="el in data" :key="el.id">
      <td> {{ el.title }} </td>
      <td> {{ el.price }} </td>
      <td>
        <span v-for="image in el.image">
          {{ image.path }}
        </span>
      </td>
    </tr>
  </table>
</div>

БЛОГ НА HUSL

Как разложить массив в массиве Vue.js

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