admin管理员组文章数量:1334332
I want to add an element to an array in my data function inside the Vue instance, from another array that i create in a separate method in my methods object, Here is my code
export default {
data(){
return {
names: ['Obama','kenedy','lincolen','bush']
}
},
methods: {
addItem(){
let funnyPeople = ['Donald Duck','Tom','Jerry','Donald Trump']
funnyPeople.forEach(name => {
this.names.push(name);
})
}
}
}
<template>
<div>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
<button @click="addItem">add Item</button>
</div>
</template>
I want to add an element to an array in my data function inside the Vue instance, from another array that i create in a separate method in my methods object, Here is my code
export default {
data(){
return {
names: ['Obama','kenedy','lincolen','bush']
}
},
methods: {
addItem(){
let funnyPeople = ['Donald Duck','Tom','Jerry','Donald Trump']
funnyPeople.forEach(name => {
this.names.push(name);
})
}
}
}
<template>
<div>
<ul>
<li v-for="name in names">{{ name }}</li>
</ul>
<button @click="addItem">add Item</button>
</div>
</template>
Now, whenever I click on the add item button, it add all the name at once, this obviously is not the behavior that I want, I want to add one name at a time. thanks in advance
Share asked Aug 22, 2018 at 7:48 Swilam MuhammadSwilam Muhammad 1333 silver badges14 bronze badges 2-
1
Why are you doing
forEach
then? – connexo Commented Aug 22, 2018 at 7:55 - so what is your suggestion ? .map maybe ? – Swilam Muhammad Commented Aug 22, 2018 at 7:58
3 Answers
Reset to default 6This fiddle shows one way of doing it
new Vue({
el: '#app',
data(){
return {
names: ['Obama','kenedy','lincolen','bush'],
funnyPeople: ['Donald Duck','Tom','Jerry','Donald Trump']
}
},
methods: {
addItem(){
if(this.funnyPeople.length > 0) {
this.names.push(this.funnyPeople[0])
this.funnyPeople.shift();
}
}
}
})
First of wall you should store the funnyPeople as a prop in data option and not re-declare it each time you access addItem method.
My method gets the first element from the funnyPeople array, pushes it in the names array and then removes it from the funnyPeople array.
This is just one of the many ways to do it.
You could simply take the first element of your array with funnyPeople[0]
and always splice the array afterwards using funnyPeople.splice(0, 1)
. The downside of this approach is that in the end you have an empty array so you have to check the length of the array. Furthermore, if your array is bigger this is possibly very slow since the array has to be recreated every time. Alternatively, you could work with an index which is incremented every iteration.
Use arr.slice()
and additional data.
export default {
data(){
return {
names: ['Obama','kenedy','lincolen','bush'],
count: 0
}
},
methods: {
addItem(){
let funnyPeople = ['Donald Duck','Tom','Jerry','Donald Trump']
if(this.count < funnyPeople.length) {
let addItem = funnyPeople.slice(this.count, this.count + 1);
this.names.push(addItem[0]);
this.count++
} else {
console.log('all items are added');
return true;
}
}
}
}
And if you declare finalArray in your data instead doing it inside of your method then use arr.splice()
:
export default {
data(){
return {
names: ['Obama','kenedy','lincolen','bush'],
funnyPeople: ['Donald Duck','Tom','Jerry','Donald Trump']
}
},
methods: {
addItem(){
if(this.funnyPeople.length) {
let addItem = funnyPeople.splice(0, 1);
this.names.push(addItem[0]);
} else {
console.log('all items are added');
return true;
}
}
}
}
本文标签: javascriptVuejs adding an element to an array from another arrayStack Overflow
版权声明:本文标题:javascript - Vue.js adding an element to an array from another array - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742266524a2443502.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论