Массивҳои реактивӣ дар Vue
Реактивият ҳатто дар ҳолати тағйирёбии массивҳое, ки тавассути v-for чоп карда мешаванд, фаъол мегардад.
Барои намуна биёед то ҳадде анҷом диҳем, ки бо клик кардан ба тугма элементҳои нав ба массив реактивӣ илова шаванд ва тағйирот дар экран низ фавран рӯй диҳанд.
Биёед тавсифкардашударо амалӣ кунем. Фарз мекунем, ки мо массив дорем:
data() {
return {
arr: ['a', 'b', 'c'],
}
}
Элементҳои ин массивро дар давр чоп кунем:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
</template>
Тугмае созем, ки бо клик кардан ба он элементҳои нав ба массив илова шаванд:
<template>
<p v-for="elem in arr">
{{ elem }}
</p>
<button @click="add">add</button>
</template>
Усули мувофиқро амалӣ кунем:
methods: {
add: function() {
this.arr.push('xxx');
}
}
Тугма дода шудааст. Массив дода шудааст. Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед. Чораеро биниҳед, то ки бо клик кардан ба тугма ба поёни ин рӯйхат баҳои нав илова шавад.
Тугма дода шудааст. Массив дода шудааст. Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед. Чораеро биниҳед, то ки ҳар дафъа бо клик кардан ба тугма аз рӯйхат баҳои аввал ҳазф шавад.
Тугма дода шудааст. Массив дода шудааст. Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед. Чораеро биниҳед, то ки ҳар дафъа бо клик кардан ба тугма аз рӯйхат баҳои охирон ҳазф шавад.
Тугма дода шудааст. Массив дода шудааст. Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед. Чораеро биниҳед, то ки ҳар дафъа бо клик кардан ба тугма аз рӯйхат баҳои пеш аз охирон ҳазф шавад.
Тугма дода шудааст. Массив дода шудааст. Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед. Чораеро биниҳед, то ки бо клик кардан ба тугма баҳои рӯйхат ба тартиб дароварда шаванд.
Тугма дода шудааст. Массив дода шудааст. Элементҳои ин массивро ба шакли рӯйхати ul чоп кунед. Чораеро биниҳед, то ки бо клик кардан ба тугма баҳои рӯйхат дар тартиби баръакс ҷойгир шаванд.
Истисноҳо
Ба сабаби маҳдудиятҳои JavaScript, Vue қобилият надорад, ки тағйироти зеринро дар массив қайд кунад: гузоштани мустақими элемент ба воситаи индекси items[калид] = арзишиНав ва тағйири ошкорои дарозии массив, масалан: items.length = дарозииНав.
