Vue හි අරාවට අංග එකතු කිරීම සඳහා පෝරමය
අපි ආදාන ක්ෂේත්රයෙන් පාඨය අරාවේ අවසානයට ප්රතික්රියාශීලී ලෙස එකතු කරමු. අපි ක්රියාත්මක කිරීමට පෙල ගනිමු. අපට අරාවක් ලබා දී ඇතැයි සිතමු:
data() {
return {
items: ['a', 'b', 'c', 'd', 'e'],
}
}
අපි newItem ගුණාංගය එකතු කරමු,
එය ආදාන ක්ෂේත්රය සමඟ වැඩ කිරීමට සහාය වේ:
data() {
return {
newItem: '',
items: ['a', 'b', 'c', 'd', 'e'],
}
}
අපි අරාවේ අන්තර්ගතය ලැයිස්තුවක ආකාරයෙන් ප්රදර්ශනය කරමු:
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>
</template>
අපි දැන් ආදාන ක්ෂේත්රයක් සහ බොත්තමක් සාදමු, එය ඔබූ විට ආදාන ක්ෂේත්රයේ පාඨය නව අංගයක් ලෙස ලැයිස්තුවේ අවසානයට එකතු වේ:
<template>
<input v-model="newItem">
<button @click="addItem">add</button>
</template>
බොත්තම ඔබූ විට, addItem ක්රමය ක්රියාත්මක වේ,
එය ආදාන ක්ෂේත්රයෙන් පාඨය ගෙන එය නව අංගයක් ලෙස
අරාවට එකතු කරයි, එය ප්රතික්රියාශීලී ලැයිස්තු
වෙනසකට තුඩු දෙයි:
methods: {
addItem: function() {
this.items.push(this.newItem);
}
}
අරාවක් ලබා දී ඇත. ආදාන ක්ෂේත්රයක් ලබා දී ඇත. බොත්තමක් ලබා දී ඇත.
මෙම අරාවේ අංග ul ලැයිස්තුවක ආකාරයෙන් ප්රදර්ශනය කරන්න.
බොත්තම ඔබූ විට ආදාන ක්ෂේත්රයේ පාඨය ලැයිස්තුවේ අවසානයට එකතු වන ආකාරයට සකසන්න.
පෙර කාර්යය වෙනස් කරන්න, එවිට නව අංගය ලැයිස්තුවේ ආරම්භයට එකතු වේ.
