2.4.0-beta with v-model support

[fritx]

Related issues and comments: #8 (comment), #22 (comment), #26, #29, #32 (comment), #41 (comment)

Related PR: #38

README: https://github.com/fritx/vue-at#using-v-model-recommended
Online demos: http://fritx.github.io/vue-at/#/en/vmodel

<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]

Works well for me, bot TA and HTML versions!

[goldsteinr]

works fine here

[jakedevsquad]

Seems to work fine!

[humblecoder]

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]

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]

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

[humblecoder]

@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]

@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]

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

[humblecoder]

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

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]

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