Customizing embedded information.

[humblecoder]

It is unclear from the documentation how to "embed" different data than is shown. Obviously we'll need to "parse" specific data on the back end once submitted in order to notify relevant parties. Placing @name isn't going to be unique enough to perform such a task.

Per the documentation, there is a section on inserting a span for embeddedItem, but it is not clear where exactly to place the <span>. Hopefully I've simply missed something, but complete example of each instance would be appreciated.

[arturcesarmelo]

@humblecoder Please, tell us what you did to embed more sub information such as an unique id. I've been needing this.

Best regards.

[fritx]

@humblecoder did you mean the ..? which were examples for custom-tags usage https://github.com/fritx/vue-at#custom-tags https://github.com/fritx/vue-at/blob/dev/src/App.vue#L25-L27

<at :members="members" name-key="name" v-model="html2">
  <span slot="embeddedItem" slot-scope="s">
    <span class="tag"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span>
  </span>

  <template slot="item" scope="s">
    <img :src="s.item.avatar">
    <span v-text="s.item.name"></span>
  </template>

  <div class="editor" contenteditable></div>
</at>

@humblecoder @arturcesarmelo maybe to put the "unique-id" in an attribute of the embeddedItem and then extract it?

<span class="tag" x-uid="s.current.uid"><img class="avatar" :src="s.current.avatar">{{ s.current.name }}</span>

[humblecoder]

@fritx perhaps part of the problem is that contenteditable isn't supported for textarea? 🤔

[fritx]

@humblecoder yeah did you use a <textarea> or a <div contenteditable> as an editor?

The feature of customizing embedded tag is only for contenteditable.

[humblecoder]

@fritx if that's the case, is there a good way to make the div look and behave like a textarea (e.g. multi-line, word wrapping, etc.)?

[humblecoder]

@fritx I actually got it working, but for some reason, it's not syncing with v-model when the data is re-loaded. The field simply remains visibly empty. Thoughts? 🤔

[humblecoder]

@fritx Discovered the problem. Apparently the component must literally be v-model bound to an object named html. This needs to be documented but preferably changed. 😖