Я действительно новичок в Vue, и для одного проекта я пытаюсь создать массив объектов по номеру. Например, если общее значение длины равно 3, то есть ли способ создать fetchList1
, fetchList2
и fetchList3
? Если значение общей длины равно 2, то он должен создать объект возврата данных как fetchList1
и fetchList2
.
Я получаю значение общей длины из базы данных, поэтому иногда оно может быть больше 50, а иногда меньше 5.
ВИД
<div id = "app">
<button @click = "grabTeams()">
CLICK ME
</button>
</div>
Метод
new Vue({
el: "#app",
data: {
totalLength: '3',
fetchList1: '',
/** if the total length is 3 then it should automatically create fetchList1, fetchList2 and fetchList3 **/
},
methods: {
toggle: function(todo){
todo.done = !todo.done
},
grabTeams(){
console.info('Total value length ' +this.totalLength);
for(let b=0; b < this.totalLength; b++){
console.info('value of '+b);
var replyDataObj1 = parseInt(b);
replyDataObj1 = {
"id" : b
}
this['fetchList'+b] = replyDataObj1;
}
},
}
})
Ниже приведена ссылка, которую я пробовал на jsfiddle.
Vue выдаст предупреждение, если вы попытаетесь динамически добавить свойства корневых данных. Из документов:
Vue не позволяет динамически добавлять новые реактивные свойства корневого уровня к уже созданному экземпляру.
Вместо этого создайте массив fetchList
:
data() {
return {
fetchList: []
}
}
Добавьте к нему:
for(let b = 0; b < this.totalLength; b++){
this.$set(this.fetchList, b, {
id: b
})
};
Вы должны использовать this.$set
(или Vue.set
), потому что вы добавляете динамические индексы в массив.
Вот демо:
new Vue({
el: "#app",
data: {
totalLength: '10',
fetchList: [],
},
methods: {
toggle: function(todo){
todo.done = !todo.done
},
grabTeams(){
for(let b = 0; b < this.totalLength; b++){
this.$set(this.fetchList, b, {
id: b
})
}
}
}
})
<div id = "app">
<button @click = "grabTeams()">
CLICK ME
</button>
{{ fetchList }}
</div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>