Vue.js Eğitimi 03-44

v-for ile object verilerini döndürmek

by Bilal AFSAR

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="person in persons">{{ person.name }} - {{ person.email }}</li>
  </ul>

  <hr />

  <ul>
    <li v-for="person in persons">
      <ul>
        <li v-for="item in person"> {{ item }}</li>
      </ul>
    </li>
  </ul>

  <hr />

  <ul>
    <li v-for="person in persons">
      <ul>
        <li v-for="(value, key, index) in person"> <b>{{ key }}</b> : {{ index }} - {{ value }}</li>
      </ul>
    </li>
  </ul>

</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    products: ["Monitor", "Klavye", "Askı", "Masa"],
    persons: [
		  { name: "Gökhan", email: "[email protected]" },
      { name: "Felakettin", email: "[email protected]" },
      { name: "Defne", email: "[email protected]" },
      { name: "İflasettin", email: "[email protected]" }
    ]
  }
});