0

I need an array keyed on a string.

    data: {
       items: {
          i['one']: true;
          i['two']: false;
       }
    }
    // get value later
    let a = vm.items.i['one'];

How do I define associative arrays in Vue? Or is there another method of achieving this?

3 Answers 3

2

There's nothing specific to Vue here, it's just JavaScript. Simple objects can be used as associative arrays. So simply this:

data: {
   items: {
      i: {
         one: true,
         two: false
      }
   }
}

While you can access the value as let a = vm.items.i['one']; the use of square brackets is usually reserved for accessing dynamic values or those containing special characters. It would be more normal to write let a = vm.items.i.one;.

Sign up to request clarification or add additional context in comments.

1 Comment

The requirement is that 'i' should be an array with an unknown number of elements which can be accessed by a string key unknown at design time. Like a dictionary or hash table.
1

I think I understand your question now with the comments you added.

This section of the documentation can help you. You can declare your data object like this:

// data must be a function
data() {
  return {
    items: {
      i: {}
    }
  }
}

And later add items like this:

vm.$set(this.items.i, 'one', true);
vm.$set(this.items.i, 'two', false);

// and later retrieve
let key = 'one';
let a = vm.items.i[key];

Remember that since data must be a function in components, you can potentially avoid the $set() calls and setup your data object at "construction time" in the data() function.

Original answer

Not to sound condescending, but I suggest you read up some more on Javascript basics. An associative array as you call it is simply an object in Javascript. This doesn't have much to do with vue.js.

Here's how to do it:

data: {
   items: {
      i: {
         one: true,
         two: false,
      }
   }
}

4 Comments

Been doing javascript for 20 years. I don't think you understand what I was asking. I do not know at design time what the keyed value will be. I need it to be a variable. So I need to access the value like this: let a = vm.items.i[key] where 'key' is a string variable provided from another source.
Otherwise I would need a long switch statement mapping the 'key' variable to each member of 'i'.
@BrobicVripiat See my update. By the way, two of us didn't understand your question at first so maybe try to add some more details in your questions. Lastly, please consider accepting answers to your questions because you haven't accepted a single answer so far on this site.
That was it. Thanks.
0

Associative arrays in JavaScript confused me as well until I realized that JavaScript does not support associative arrays like other languages do. Here is a decent page on the subject at w3schools.com.

From that page: "Many programming languages support arrays with named indexes.

"Arrays with named indexes are called associative arrays (or hashes).

"JavaScript does not support arrays with named indexes.

"In JavaScript, arrays always use numbered indexes."

The page also includes this notice: "WARNING !! If you use named indexes, JavaScript will redefine the array to a standard object. After that, some array methods and properties will produce incorrect results."

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.