2.4.0-beta with v-model support

fritx commented 6 years ago

<at v-model="html">
  <div contenteditable></div>
</at>

<at-ta v-model="text">
  <textarea></textarea>
</at-ta>

Thank you all, @KuiShang, @pingshunhuangalex, @Yuzhongbing, @youyi1314, @iadambrown, @rap2hpoutre, @Brimstedt

# please try
npm i -S vue-at@2.4.0-beta

Brimstedt commented 6 years ago

Works well for me, bot TA and HTML versions!

goldsteinr commented 6 years ago

works fine here

jakedevsquad commented 6 years ago

Seems to work fine!

humblecoder commented 5 years ago

This works for saving data, but it doesn't seem to re-load correctly.

Step 1: Create the item -- say a note -- and persist it (whether to file or DB) Step 2: Refresh page Step 3: Retrieve said note and set it to whatever v-model is set to. You will notice the component doesn't display the data.

Can anyone else confirm?

humblecoder commented 5 years ago

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

fritx commented 5 years ago

@humblecoder v-model on <at> should be a string https://fritx.github.io/vue-at/#/en/vmodel

humblecoder commented 5 years ago

@fritx If I'm understanding you correctly, it is. However, I had it set up as part of an object:

<at v-model="note.contents"></at>
...
data(){
    return{
        note:{}
    }
}

It works just fine when it comes to setting note.contents. However, when I reload the page and note is filled from the DB, it doesn't restore it to the field. I am forced to literally create a temporary html:'' data object (and it apparently also must be named html, as nothing else worked). Hopefully I simply missed something on my end. But if you would, please verify (or disprove) my findings and repost. Best.

fritx commented 5 years ago

@humblecoder you should better declare properties in data explicitly, which is a Vue convention. Otherwise, you would have to call something like $set xD

Data Initialization Vue’s data observation model favors deterministic data models. It is recommended to initialize all the data properties that needs to be reactive upfront in the data option. For example, given the following template: -- https://012.vuejs.org/guide/best-practices.html

fritx commented 5 years ago

Anyway, it's not bad to make it clear as possible in documentation and anywhere. :+1:

humblecoder commented 5 years ago

@fritx I certainly take your point of being clear. But, to be fair

You don’t have to set every single nested property in your data though. It is ok to initialize a field as an empty object, and set it to a new object with nested structures later, because Vue will be able to walk the nested properties of this new object and observe them.

Also, that was outdated documentation. :stuck_out_tongue_winking_eye:

And to specifically require a name of html seems a bit much. What if I required multiple @mention inputs on a single page? Am I missing something here?

fritx commented 5 years ago

@humblecoder it's not required to have a data named "html".

It's just a demo, where we have a data named "html" and pass it to the <at>.

If we have multiple inputs, for example, the code would be like this:


<at v-model="html1">
  <div contenteditable></div>
</at>
<at v-model="html2">
  <div contenteditable></div>
</at>
<at v-model="text1">
  <textarea></textarea>
</at>

<script>
// ...
data () {
  return {
    html1: 'foo',
    html2: 'bar',
    text1: 'yay'
  }
}
</script>

fritx / vue-at

2.4.0-beta with v-model support #43