Initial inline input value

Vue.js version

2.0.2

Reproduction Link

https://jsfiddle.net/uojhhjr7/ https://jsfiddle.net/k8bfrxwz/

While switching to Vue2, I realize that it’s not possible to define a model initial value from the template anymore.

Let’s say I have a server-side validated form (with a preview powered by Vue) which brings back the user if the validation detected an error.

I’d like to populate the form with the previously typed values (and get the corresponding preview), but I cannot simply set an inline value anymore because Vue warns me with inline value attributes will be ignored when using v-model

I took a look at the migration guide and found a confirmation it was not possible anymore, but I can’t find any workaround.

Of course, the simple solution would be to modify the initial value of the model within the Vue instantiation, but it’s a children component from a vue file, webpacked with other scripts.

I got this solution working, but it seems a little bit overkill to me, regarding the usual elegance of Vue.js.

So here is the aim of this issue : Is there a way to pass an initial value to a v-model from template to Vue as we used to ?

[georgecoca]

Another simple solution would be to use ref and data attributes to reference the element and then access it once the template has been rendered.

Template <input type="text" ref="name" data-value="John">

Javascript

data() {
    return {
        name: ''
    }
},
mounted() {
    this.name = this.$refs.name.dataset.value; // See note below
}

Note: check for dataset compatibility, otherwise use jQuery or any library to extract data-.

Hope that helps 😉

[yyx990803]

In Vue 2.0, the template is like a function: it gets called every time something changes. With this in mind, having an inline value is basically saying the input’s value is static and should never change - which doesn’t make sense when you are using v-model with it.

This does makes your use case a bit more complicated, but here’s how I’d do it - render your form state in your server HTML output and initialize your component with that data: https://jsfiddle.net/vzns7us7/