admin管理员组文章数量:1323336
Background: I have an array in data() that gets populated with objects from the backend. If the GET request retrieves 6 objects those 6 objects will update in the array.
Problem: I already understand vm.$set is needed to add properties to an object. But how do add properties to all object in the array?
I want to change:
data() {
return {
expenseButton: [{key:value},{key:value},{key:value}]
};
}
to
data() {
return {
expenseButton: [{key:value, key2:value2},{key:value, key2:value2},{key:value, key2:value2}]
};
}
Failed attempt which logs newValue as a property in the array instead of each object
methods: {
check() {
this.$set(this.expenseButton, "newValue", this.expenseButton.newValue);
console.log(this.expenseButton);
}
},
UPDATE How to target all objects in an array via vm.$set so that all objects has a new property called "newValue"
data() {
return {
expenseButton: [{key1:value1},{key2:value2},{key3:value3}]
};
}
TO
data() {
return {
expenseButton: [{key1:value1,newValue: ''},{key2:value2, newValue: ''},{key3:value3, newValue: ''}]
};
}
Background: I have an array in data() that gets populated with objects from the backend. If the GET request retrieves 6 objects those 6 objects will update in the array.
Problem: I already understand vm.$set is needed to add properties to an object. But how do add properties to all object in the array?
I want to change:
data() {
return {
expenseButton: [{key:value},{key:value},{key:value}]
};
}
to
data() {
return {
expenseButton: [{key:value, key2:value2},{key:value, key2:value2},{key:value, key2:value2}]
};
}
Failed attempt which logs newValue as a property in the array instead of each object
methods: {
check() {
this.$set(this.expenseButton, "newValue", this.expenseButton.newValue);
console.log(this.expenseButton);
}
},
UPDATE How to target all objects in an array via vm.$set so that all objects has a new property called "newValue"
data() {
return {
expenseButton: [{key1:value1},{key2:value2},{key3:value3}]
};
}
TO
data() {
return {
expenseButton: [{key1:value1,newValue: ''},{key2:value2, newValue: ''},{key3:value3, newValue: ''}]
};
}
Share
Improve this question
edited May 25, 2020 at 23:38
Eddie Weldon
asked May 25, 2020 at 21:55
Eddie WeldonEddie Weldon
1336 silver badges18 bronze badges
1
- Use splice on the array or modify the array then replace it. – Cue Commented May 25, 2020 at 22:01
2 Answers
Reset to default 5You can use $set
on arrays by passing the index at which you wish to set a new value.
However, since you're adding a new property to each item in the array, you could just map over the array items, add the property and replace the data item altogether which would be far more efficient.
check() {
this.expenseButton = this.expenseButton.map((obj) => {
obj.newValue = ''
return obj
})
}
To retain reactivity, you will need to invoke $set
on each index with the corresponding key-value pair. See @blex's answer for reference.
check() {
this.expenseButton.forEach((_, index) => {
this.$set(this.expenseButton[index], 'newValue', '')
})
}
If the above resolves your question, please accept @blex’s answer as your accepted solution.
You could use this.$set
in a loop:
Vue.ponent('my-ponent', {
template: '#my-ponent',
data() {
return {
expenseButton: [{ key: 0 }, { key: 1 }, { key: 2 }]
};
},
methods: {
check() {
this.expenseButton.forEach((o, i) => {
this.$set(this.expenseButton[i], "key2", i * 2);
});
}
}
});
var vm = new Vue({
el: '#app'
});
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.21/vue.min.js"></script>
<div id="app">
<my-ponent></my-ponent>
</div>
<template id="my-ponent">
<div>
<ul>
<li v-for="x in expenseButton" :key="x.key">
{{x}}
</li>
</ul>
<button @click="check">Update items</button>
</div>
</template>
本文标签: javascriptHow to add a property to ALL objects in an array (data) using VuejsStack Overflow
版权声明:本文标题:javascript - How to add a property to ALL objects in an array (data) using Vue.js? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742137013a2422414.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论