search

fritx / vue-at

At.js for Vue.
https://fritx.github.io/vue-at/
MIT License
529 stars 114 forks source link

Customizing embedded information. #70

Open humblecoder opened 5 years ago

humblecoder commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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

fritx commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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. 😖