Containers in VueX are Javascript objects about vue.py

[adamlwgriffiths]

I suspect this may be related to the details in Py/JS Bridge

The wrapper around lists and dictionaries provide the same interface than native python types but due to restrictions in Brython, they are no subclasses of list/dict. This can lead to problems when passing this methods to other native python methods. Therefore a helper is provided to convert a wrapped Javascript object into a native python type.

However, when calling Object.to_py I still end up with a javascript object

Making the following changes:

    @computed
    def ids(self):
        data = Object.to_py(self.store.data)
        print(f'Object.to_py(self.store.data) = {data}')
        return data.keys()

I still end up with the same error, the print function outputs:

Object.to_py(self.store.data) = <Javascript Object object: [object Object]>

There seems to also be some conversion tied to the @getter decorator.
If I add a @getter function to the Store that is just return {} it still comes back as a JSObj.

[adamlwgriffiths]

Ok, so it looks like the way to "fix" this is to use the bridge.List and bridge.Dict.

class Store(VueStore):
    d = {
        'a': 123,
        'b': 456,
    };
    l = [1,2,3,4]

    @getter
    def ddict(self):
        return dict(Dict(self.d))

    @getter
    def llist(self):
        return list(List(self.l))

This is pretty cumbersome.

Doing something like slicing an array becomes

def slice(self, start, stop):
    self.store.l = list(List(self.store.l))[start:stop]

I tried using @property decorator to make this a bit more streamlined, but the components get messed up when using them for component values.

The best solution I've found so far is to make a proxy object that wraps the store and have a tonne of conversion functions.

[stefanhoelzl]

Thanks for reporting your Issue.

Unfortunately I cannot reproduce the issue.
Here is the app.py I am running

from vue import VueComponent, VueStore, computed

class Store(VueStore):
    data = {
        'a': 123,
        'b': 456,
    }

class DataComponent(VueComponent):
    id: str
    template = '''
        <div
            :id="id">
            {{ data }}
        </div>
    '''
    @computed
    def data(self):
        return self.store.data[self.id]

DataComponent.register()  # in your example the DataComponent was not registered

class App(VueComponent):
    template = '''
        <div>
            <data-component
                v-for="id in ids"
                :key="id"
                :id="id"  # in your example the id prop was not set
            />
        </div>
    '''

    @computed
    def ids(self):
        print(f'self.store.data = {self.store.data}')
        return self.store.data.keys()


App("#app", store=Store())

with the vuepy.yml to enable vuex

scripts:
  vuex: true

[adamlwgriffiths]

I had moved onto other things for a while and have come back with a clean slate.
Got the latest vue 2.x, etc.
And now this issue isn't occuring. Most curious.