[Vuejs]-Is it possible to have an associative array in Vue.js without using an object?

by

1👍

✅

<script>
export default {
  name: 'VueHeader',
  data() {
    return {
      links : {'Dashboard': '/dashboard', 'Account': '/account'},
    };
  }
}
</script>

JS Objects can use strings as keys. These will meet your needs because 'Foo' !== 'foo'. Take the following example:

> x = {"foo": 10, "Foo": 20, "foo bar": 15}
{ foo: 10, Foo: 20, 'foo bar': 15 }
> x['Foo']
20
> x['foo']
10
> x['foo bar']
15

1👍

As another answer correctly states, plain objects act as associative arrays in JavaScript:

...
links : {'My Dashboard': '/dashboard', 'My Account': '/account'},
...

Keys can be arbitrary strings. In case a key contains spaces or other non-alphanumeric characters, it can be accessed with bracket notation. Since it’s fundamental JS feature, it’s supported in Vue templates:

{{links['My Dashboard']}}

The problem with plain objects is that specs don’t guarantee the order of keys, although it’s de facto preserved in all current implementations.

A modern alternative that guarantees the order is ES6 Map. It’s currently non-reactive in Vue and can substitute plain object only for static data:

...
links : new Map([['My Dashboard', '/dashboard'], ['My Account': '/account']]),
...

0👍

Since there is no such thing as associative array in javascript, an array must always have it’s integer indexes in an incrementing order.

Instead of that, you can just create an object instead and access the property in array notation as such:

const obj = { 'Dashboard': '/dashboard', 'Account': '/account' };

console.log(obj['dashboard']);
console.log(obj['Account']);

Leave a comment