Vue တွင် အရာဝတ္ထု Array များကို ဖြတ်သန်းခြင်း

ယခု အရာဝတ္ထု array များကို ဖြတ်သန်းနည်းကို သင်ယူကြပါစို့။ နမူနာတစ်ခုဖြင့် ကြည့်ရအောင်။ အောက်ပါ array ရှိသည်ဆိုပါစို့:

data() {
	return {
		users: [
			{
				name: 'name1',
				surn: 'surn1',
			},
			{
				name: 'name2',
				surn: 'surn2',
			},
			{
				name: 'name3',
				surn: 'surn3',
			},
		]
	}
}

ကျွန်ုပ်တို့၏ array ကို loop ဖြင့် ဖြတ်သန်းကြပြီး user တစ်ဦးစီအတွက် သီးခြား စာပိုဒ်တစ်ခုစီတွင် သူ၏ အမည်နှင့် မျိုးနွယ်အမည်ကို ဖော်ပြကြပါစို့:

<template>
	<p v-for="user in users">
		{{ user.name }}
		{{ user.surn }}
	</p>
</template>

အောက်ပါ array ကို ပေးထားသည်:

data() {
	return {
		hrefs: [
			{href: '1.html', text: 'text1'},
			{href: '2.html', text: 'text2'},
			{href: '3.html', text: 'text3'},
		]
	}
}

Loop ကို အသုံးပြု၍ အောက်ပါ code ကို ဖွဲ့စည်းပါ:

<ul>
	<li><a href="1.html">text1</a></li>
	<li><a href="2.html">text2</a></li>
	<li><a href="3.html">text3</a></li>
</ul>

အောက်ပါ ထုတ်ကုန် array ကို ပေးထားသည်:

data() {
	return {
		products: [
			{
				name: 'product1',
				price: 100,
				quantity: 5
			},
			{
				name: 'product2',
				price: 200,
				quantity: 4
			},
			{
				name: 'product3',
				price: 300,
				quantity: 3
			},
		]
	}
}

Loop ကို အသုံးပြု၍ အောက်ပါ code ကို ဖွဲ့စည်းပါ:

<table>
	<tr>
		<td>product1</td>
		<td>100</td>
		<td>5</td>
	</tr>
	<tr>
		<td>product2</td>
		<td>200</td>
		<td>4</td>
	</tr>
	<tr>
		<td>product3</td>
		<td>300</td>
		<td>3</td>
	</tr>
</table>