Question/Feature Request: How to use prop.sync or update:prop? about jsx-vue2

[lzhoucs]

This is what I came up with. Not any better looking, but no spread. It would be nice if .sync can be supported natively in jsx.

<VDataTable
  pagination={this.pagination}
  on={
    {
        "update:pagination": newVal ⇒ (this.pagination = newVal)
    }
  }

[6XGate]

@nickmessing

the onUpdate:myprop or on-update:myprop should work, if you have issues with that open another issue

onUpdate:prop does not work. should a new issue be filed or can this one be reopened?

[DaleMckeown]

You don't have to use JSX spread to do this.

You can use the syntax below, which calls an anonymous function when the change event is triggered.

<MyComponent myprop={this.myprop} on-change={(val)=> {this.myprop = val; }} />

However, a better way would be to use the v-model directive. Usually, this is attached to the input event, but it has a lazy modifier that binds to the change event instead:

<MyComponent v-model_lazy={this.myprop} />

[Dylan-Chapman]

Sorry, I should clarify that this is in the case where myprop is not the component's model. For example, Vuetify's pagination prop on their data tables.

[DaleMckeown]

Ah, I see. I don't think .sync is supported directly, but manually listening to the update events should work, assuming it is being emitted in the component.

Have you tried:

<MyComponent myprop={this.myprop} on-update:myprop={(val) => { this.myprop = val; }}

The : character might be a bit tricky, I haven't tried listening to emitted events in this way. I'd also suggest trying on-update_myprop and on-updatemyprop in case these are being handled.

You could also change the emitted event name to remove the colon character.

Other than that, spread may be the only way at the moment.

[nickmessing]

the onUpdate:myprop or on-update:myprop should work, if you have issues with that open another issue @Dylan-Chapman