I am encountering an issue with the way I add contents to an array using keys instead of indexes.
After experimenting in a sandbox environment, a few observations were made:
- Despite adding contents to the array via key, they do not appear and the length remains 0 (even though they are present)
- I am unable to swap the contents between various array items.
Is there a specific rule or limitation when using keys instead of indexes for viewing and swapping array contents?
For reference, I have created a basic fiddle at: https://jsfiddle.net/26Lve48g/
new Vue({
el: "#app",
data: {
blah: [],
},
created() {
this.blah['abc'] = 'foo';
this.blah['def'] = 'bar';
},
computed: {
// Displays the value correctly in the HTML window
blahAbc() {
return this.blah['abc'];
},
// Displays the value correctly in the HTML window
blahDef() {
return this.blah['def'];
},
},
methods: {
swap(a, b) {
const tmpA = JSON.parse(JSON.stringify(this.blah[a]));
const tmpB = JSON.parse(JSON.stringify(this.blah[b]));
Vue.set(this.blah, this.blah[a], tmpB);
Vue.set(this.blah, this.blah[b], tmpA);
}
},
})