DEV Community

Discussion on: Multiple v-model for the rest of us

Collapse
 
sjoerd82 profile image
Sjoerd82

Just took it for a quick test drive and it seems to work fine, and is nice for us people that are going to migrate to Vue3 somewhere soonish, giving us the opportunity to already start incorporating some of the new features using plugins like these.

Without having looked too closely yet at Vue3, it seems that not much change is needed when migrating from your plugin to Vue3. Could it be as little as uninstalling and renaming v-models:select to v-model:select, and v-models:input to v-model:input (keeping with the example)?

Collapse
 
sjoerd82 profile image
Sjoerd82

One odd thing I just came across when using this on arrays (and I imagine on objects as well). Normally I would in a component, in the created()-phase, wait on the $nextTick to set an isLoaded variable to true, this way I'm sure everything is populated and ready, however, the variables set via this multiple v-model take a long time to initialize, and aren't ready yet on $nextTick.

I found no other way to wait for the first time the watcher got triggered on the array. This feels like it's the wrong way around:

models: [
    { data: "arrMyArray", event: "models:arrMyArray" },
],

watch: {
    arrMyArray(newVal) {
        if (!this.isLoaded) {
            this.isLoaded = true
        } else {
            this.$emit('models:arrMyArray',newVal)
        }
    },
},
Enter fullscreen mode Exit fullscreen mode