Open fritx opened 6 years ago
Works well for me, bot TA and HTML versions!
works fine here
Seems to work fine!
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?
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. 😖
@humblecoder v-model
on <at>
should be a string
https://fritx.github.io/vue-at/#/en/vmodel
@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.
@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
Anyway, it's not bad to make it clear as possible in documentation and anywhere. :+1:
@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?
@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>
Related issues and comments: https://github.com/fritx/vue-at/issues/8#issuecomment-304666006, https://github.com/fritx/vue-at/issues/22#issuecomment-338363789, #26, #29, https://github.com/fritx/vue-at/issues/32#issuecomment-355378888, https://github.com/fritx/vue-at/issues/41#issuecomment-369471368
Related PR: #38
README: https://github.com/fritx/vue-at#using-v-model-recommended Online demos: http://fritx.github.io/vue-at/#/en/vmodel
Thank you all, @KuiShang, @pingshunhuangalex, @Yuzhongbing, @youyi1314, @iadambrown, @rap2hpoutre, @Brimstedt