Objects as attributes?

Are components just fancy element wrappers or am I supposed to be able to pass richer forms of data through the parameters?

This is with v1 moon, and a slightly modified monx (just so that it is compatible?? with v1) https://github.com/LeviSchuck/moon-rerender In this reduced example, I have a list of related buttons which are populated dynamically. I would like the prompt component to make the buttons based on an input array of simple button-detail-objects {label:'text here', key:'code-thing-here'} However, instead it seems to be casted to a string like [Object, Object ..] I looked up some old vue stuff and they suggested using JSON stringify and parse between things which seems so incredibly distasteful.

from index.html

<prompt m-if="store.state.pendingPrompts" options="{{store.state.prompts}}"></prompt>

from scripts.js

const store = new Monx({
  state: {
    pendingAgree: true,
    agreeText: "Yes",
    // normally []
    prompts: [{
      label: "Adam Jensen",
      scene: "adam"
    }, {
      label: "JC Denton",
      scene: "jc"
    }],
    // normally false
    pendingPrompts: true,
  },
...
}

Of additional note, when I dispatch to monx and change the agreeText, the button is not updated to reflect this. However when pendingAgree is updated within a dispatch action, the m-if attribute behaves as expected and will hide the button.

<c-button m-if="store.state.pendingAgree" m-on:click="agree" content="{{store.state.agreeText}}"></c-button>

1. Is there any way to pass structured data, or is everything a string?
2. How come m- attributes re-render but others do not re-render? Is this an artifact of monx and moon?

[LeviSchuck]

Nevermind, this was an error on my part, it works just fine 😉

[LeviSchuck]

Indeed m-literal:options (where options is my custom property) does the job! At least initially.

I have updated my reduced example repo. https://github.com/LeviSchuck/moon-rerender

There are two versions, one using the template stuff, and one using a direct render function. They both behave the same, so I think I got whatever right inside the render function.

The button’s content does change when the monx store’s object changes, and it does hide correctly too. But the prompt button list never updates / re-renders when the corresponding monx store object updates.

Clicking on the agree button dispatches a replacement set of button descriptions (in scripts.js) for the prompt list to render–but it seems the render function is not called again on the prompt list…

Am I missing something on the component itself?