Pass array of objects to a data object in Vue specs

Question

I am writing specs for my vue component and have to pass a value to a data object defined in the component I am passing it like this, wrapper.vm.organizations = [{"id":2,"company_name":"google","user_count":0}]

But in my component it is getting undefined and on console.log this is what i get,

[
      {
        id: [Getter/Setter],
        company_name: [Getter/Setter],
        user_count: [Getter/Setter]
      }
]

How can i pass values properly?

Answer 1

The data property of an object represents its internal state and it is kind of weird to try to assign values from outside.

I would suggest to use properties (props). Props are values send from the outside to the component.

If properties doesn't work for you, then you could make a method in your component, that method will receive your new values and assign those values to internal data. From the outside instead of assigning directly the values, you will call a method to do that.

Answer 2

Vue 3 wraps reactive data in proxies. Therefore your data might look like this, with getters and setters.

Try console.log(JSON.stringify(YOUR_ARRAY)) to see if your data is as expected.

You did not provide enough code, to know exactly why your data is undefined, where you expect it to be available.

Rememeber that props should be accessed using this.$props.PROPNAME inside a child component.